@import url("modern-normalize.css");
@import url("open-props@1.7.16.css");


.login-layout {
  min-height: 100vh;
  
  display: grid;
  gap: clamp(0.75rem, 4vw, 1.5rem);
  padding: var(--size-3);
  
  background-image: linear-gradient(
    150deg,
    color-mix(in srgb, var(--sand-7), transparent 10%),
    color-mix(in srgb, var(--sand-11), transparent 10%)
  ), url("/img/login-bg.jpg");
  background-size: cover;
  background-position: center;
  align-content: center;

  @media (min-width: 960px) {
    grid-template-rows: auto;
    grid-template-columns: 3fr 2fr;
    align-content: stretch;
    align-items: stretch;
  }
}

.login-layout__heading-area {
  color: white;
  display: flex;
  align-items: center;
  justify-self: center;
  padding-inline-start: clamp(0px, 5vw, 30rem);
  padding-block-end: clamp(0px, 5vw, 30rem);
  width: 100%;
  opacity: 0.8;
  
  & h1 {
    font-size: var(--font-size-7);
    margin-block-start: 0;
    margin-block-end: var(--size-3);
  }
  
  & p {
    font-size: var(--font-size-3);
    margin: 0;
  }
}

.login-layout__form-container {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
  padding: var(--size-2);
  width: 100%;
  background-color: white;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-5);
  
  h2 {
    margin-block-start: 0;
  }
  
  
  .error-message {
    padding: var(--size-2);
    color: var(--red-9);
    border-radius: var(--radius-2);
    background-color: var(--red-0);
    margin-block: var(--size-3);
  }
  
  .info-message {
    padding: var(--size-2);
    color: var(--blue-9);
    border-radius: var(--radius-2);
    background-color: var(--blue-0);
    margin-block: var(--size-3);
  }
  
  & input[type="submit"] {
    margin-block-start: var(--size-3);
    
    padding: var(--size-2) var(--size-3);
    font-size: var(--font-size-2);
    /* font-weight: var(--font-weight-6); */
    color: white;
    background: var(--indigo-7);
    border: none;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;

    &:hover,
    &:focus {
      background: var(--indigo-9);
      box-shadow: var(--shadow-3);
      outline: none;
    }
  }
}


.login-form-wrapper {
  flex-grow: 1;
  padding: var(--size-6);
  max-width: var(--size-content-3);
}


/* Overrides edgar-form because this is the only place where we're removing all the old edgar styles for now */
/* The old edgar styles set the based font size very small */
/* Here, the base font size is larger which makes the rem-based spacing too large */
.edgar-form .edgar-form__field-wrapper + .edgar-form__field-wrapper.edgar-form__field-wrapper {
  margin-top: var(--size-3);
}