@layer components {
  .login {
    min-height: 100vh;
    width: min(100%, var(--max-reach-lg-x2));
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-inline: var(--space-sm-x1);
    margin-inline: auto;
  }

  .login__header {
    img {
      width: min(100%, var(--length-96));
      margin-block-end: var(--length-8);
    }

    svg {
      background: white;
      border-radius: var(--border-radius-round);
      padding: var(--length-6);
      width: var(--length-24);
      height: var(--length-24);
      margin-block-end: var(--length-6);
      color: var(--color-primary-7);
      box-shadow: var(--shadow-3);
    }

    h1 {
      font-size: var(--font-size-lg-x1);
      font-weight: var(--font-weight-semi-bold);
      color: var(--color-primary-7);
      text-wrap: pretty;
      margin-block-end: var(--length-4);
    }
  }

  .login__form {
    width: min(100%, var(--max-reach-lg-x1));
    display: flex;
    flex-direction: column;
    margin-top: var(--length-8);

    form {
      label {
        display: none;
        font-size: var(--font-size-sm-x2);
      }

      input {
        font-size: var(--font-size-sm-x1);
        box-shadow: var(--shadow-2);
        background: white;
        width: 100%;
        border: var(--border-width-1) solid var(--color-neutral-3);
        border-radius: var(--border-radius-2);
        padding: var(--length-2-5) var(--length-4);
      }

      button {
        margin-block: var(--length-6);
      }
    }
  }

  .login__confirmation {
    font-size: var(--font-size-sm-x1);
    width: min(100%, var(--max-reach-lg-x1));
    display: flex;
    flex-direction: column;
    gap: var(--length-6);
  }

  .login__email {
    color: var(--color-primary-7);
    background: white;
    width: fit-content;
    padding: var(--length-2-5) var(--length-4);
    font-size: var(--font-size-sm-x1);
    box-shadow: var(--shadow-3);
    overflow-wrap: break-word;
    hyphens: auto;

    /* Adds hyphens for better flow */
  }

  .login__resend-button {
    color: var(--color-primary-6);

    &[disabled] {
      color: var(--color-neutral-6);
      text-decoration: none;
      font-style: italic;
      cursor: not-allowed;

      @media (any-hover: hover) {
        &:hover {
          scale: 1;
          background: unset;
        }
      }
    }
  }

  .login__help {
    color: var(--color-neutral-6);
    font-size: var(--font-size-sm-x1);
  }

  .login__help-email {
    color: var(--color-primary-6);
  }
}