@charset "UTF-8";
@use '../../../../../../node_modules/@craftcms/sass/mixins';

.login-alt-menu {
  z-index: 1001;
}

body.login {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  header {
    flex: 0 0 calc(var(--header-height) + 1px);
    display: flex;
    align-items: center;
    padding: var(--header-padding);
    border-block-end: var(--header-border);
    background: var(--header-bg);

    #system-info {
      padding-inline: 0;

      &:hover,
      &:focus {
        background: transparent;
      }
    }
  }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--m);
    padding: var(--padding);

    img#login-logo {
      width: auto;
      max-width: calc(15rem + var(--pane-padding) * 2);
    }

    #poweredby {
      display: block;
      margin-block-start: calc(70rem / 16 - var(--m));
      text-align: center;
      opacity: 0.8;

      &:hover,
      &:focus,
      &:active {
        opacity: 1;
      }

      > svg {
        display: inline-block;
      }
    }
  }
}

.modal.email-sent {
  width: 300px;

  .body {
    padding-inline-start: 68px;

    &::before {
      @include mixins.icon;
      display: block;
      position: absolute;
      inset-block-start: 24px;
      inset-inline-start: 24px;
      content: 'mail';
      font-size: 30px;
      color: var(--link-color);
    }
  }
}

.login-modal {
  width: calc(600px + var(--l) * 2);
  max-width: calc(100% - 20px);
  background: var(--login-modal-bg, var(--modal-bg));
  border-radius: var(--radius-lg);

  .body {
    display: flex;
    flex-direction: row;
    padding: var(--l);

    .login-modal-intro,
    .login-modal-form {
      width: 300px;
      max-width: 100%;
    }

    .login-modal-intro {
      padding: var(--m);
    }
  }

  @media screen and (width <= 656px) {
    border-radius: var(--radius-lg);

    .body {
      padding: var(--m);
      flex-direction: column;
      gap: var(--m);
      overflow: auto;

      .login-modal-intro {
        padding-block: var(--xs);
        padding-inline: var(--xl);
      }

      .login-modal-form {
        border-radius: 0;
      }
    }
  }
}

.login-container {
  position: relative;
  width: calc(15rem + var(--pane-padding) * 2);
  max-width: 100%;

  form {
    display: flex;
    flex-direction: column;
    gap: var(--l);

    input[readonly] {
      cursor: not-allowed;
    }

    .field {
      margin-block: 0;
    }

    hr {
      margin-block: calc(var(--pane-padding) - var(--l));
    }

    .btn {
      display: flex;
    }
  }

  .alternative-login-methods {
    margin-block-start: var(--m);

    .btn {
      width: 100%;
    }
  }

  .login-forgot-password,
  .login-alt-container button {
    font-size: 11px;
    color: var(--light-text-color);
  }

  .login-alt-container {
    margin-block: calc(var(--s) - var(--pane-padding));
    margin-inline: 0;

    button {
      display: inline-flex;
      width: auto;
    }
  }

  .login-forgot-password:hover,
  .login-forgot-password:focus,
  .login-alt-container button:hover,
  .login-alt-container button:focus {
    color: var(--link-color);
  }

  .login-errors {
    text-align: center;
    color: var(--fg-error);
    margin-block-start: 1em;
  }

  .login-reset-password .login-errors {
    margin-block-start: 0;
  }
}
