/** LOGIN FORM **/

main:has(#login-form-container) {
  display:flex;
  width: 100vw;
  height: 80vh;
  justify-content: center;
  align-items: center;
}

#login-form-container {
  display: flex;
  flex-direction: column;
  width: 50ch;
  height: auto;
  border: 1px solid var(--project-color-input-border-nofocus);
  background: var(--project-color-input-background);
  justify-content: space-between;
  overflow: hidden;
}

.login-hero-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: var(--project-login-hero-sidebar);
  background-color: gray;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 200px;
  width: 100%;
}

#login-form-container :is(input, button.primary) {
  width:100%;
  box-sizing: border-box;
}

modal-box#login-modal {
  height: 30vh;
  width: 40vw;
}

modal-box#login-modal>section {
  margin: 0
}

.login-form-container {
  --width: calc(100% - (var(--margin-l) * 2) - (var(--input-element-border-width) * 2));
  /* [__custom-input] {
    margin: var(--margin-xs) var(--margin-l);
    width: var(--width);
    box-sizing: border-box;
  } */
  .hbox {
    justify-content: flex-end;
    /* width: var(--width); */
    width: 100%;
    margin: var(--margin-xxs) 0 var(--margin-s);
    font-size: .8em;
  }
  :is(form-request, login-form-request) {
    padding: var(--margin-xs) var(--margin-l) var(--margin-l);
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  label{
    text-align: left;
    margin-bottom: var(--margin-xxs);
    &:has(input-switch) {
      display: flex;
      justify-content: left;
      align-items: center;
      margin-top: var(--margin-xs) 0 var(--margin-s);
    }
  }
  small {
    margin: var(--margin-xs) 0;
  }
  input-password {
    margin-bottom: var(--margin-xs);
  }
  chip-nav {
    border: none;
    border-top: 1px solid var(--input-element-border);
    hgroup {
      display: none;
    }
  }
}

.login-form-container :is(h1, p) {
  text-align: center;
  padding: 0 1rem;
}

#login-form-container fieldset {
  padding: 0;
  border: none;
}

#login-form-container h1 {
  font-size: 1.45em;
  margin: var(--margin-m) 0 var(--margin-s);
}

#login-form-container input[type="username"], #login-form-container input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  /* font-family: var(--project-head-family); */
  /* padding: .35rem; */
  /* margin-bottom: 1rem; */
  font-size: 1.15rem;
}

#login-form-container input {
  /* margin-bottom: 1rem; */
}

#login-form-container .error{
  flex-grow: 1;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--margin-s);
}

#login-form-container hr{
  width:100%;
}

#login-form-container button.primary {
  width: 100%;
  padding: .35rem;
  font-size: 1.15rem;
  font-family: var(--project-head-family);
  margin-top: var(--margin-m);
}

#login-form-container input-switch {
  margin-right: 1ch;
}

@media only screen and (max-width: 35em) {
  #login-form-container {
    width: 100vw;
  }
}