@layer reset, tokens, theme, base, components, utilities;

@layer components {
  .auth__error,
  .auth-remembered__error,
  .account-delete__prompt,
  .oauth-consent__warning {
    color: var(--text-color-danger);
    font-weight: 500;
  }

  .auth__switch,
  .auth-code__status,
  .account-delete__copy {
    color: var(--text-color-muted);
  }

  .auth-code__address {
    color: var(--text-color);
    font-weight: 500;
  }

  .auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  .auth-providers {
    display: grid;
    gap: 0.75rem;
  }

  /* The providers' sign-in branding fixes each button's colours, whatever the app's roles:
     Google's light and dark themes, and Apple's white-with-outline style on a light page and
     white style on a dark one.
     https://developers.google.com/identity/branding-guidelines
     https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple */
  .auth-google {
    --brand-fill: light-dark(#ffffff, #131314);
    --brand-ink: light-dark(#1f1f1f, #e3e3e3);
    --brand-edge: light-dark(#747775, #8e918f);
  }

  .auth-apple {
    --brand-fill: #ffffff;
    --brand-ink: #000000;
    --brand-edge: light-dark(#000000, #ffffff);
  }

  .auth-google,
  .auth-apple {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    min-block-size: var(--control-height);
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--brand-edge);
    border-radius: var(--border-radius);
    background: var(--brand-fill);
    color: var(--brand-ink);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 150ms ease-out;

    @media (hover: hover) {
      &:hover {
        background: color-mix(in oklch, var(--brand-ink) 8%, var(--brand-fill));
      }
    }

    @media (forced-colors: active) {
      --brand-fill: ButtonFace;
      --brand-ink: ButtonText;
      --brand-edge: ButtonText;
    }
  }

  .auth-google__logo,
  .auth-apple__logo,
  .auth-remembered__icon {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .auth-last-used {
    flex: none;
    margin-inline-start: auto;
    padding-inline: 0.5rem;
    border: 1px solid color-mix(in oklch, currentColor 45%, transparent);
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 500;
    white-space: nowrap;
  }

  .auth-remembered {
    display: grid;
    gap: 1rem;
  }

  .auth-remembered__option {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    min-inline-size: 0;
    min-block-size: var(--control-height);
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border: 1px solid var(--text-color-muted);
    border-radius: var(--border-radius);
    background: var(--background-color-surface);
    color: var(--text-color);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 150ms ease-out;

    @media (hover: hover) {
      &:hover:not(:disabled) {
        background: color-mix(in oklch, var(--text-color) 5%, var(--background-color-surface));
      }
    }

    &:disabled {
      cursor: progress;
      opacity: 0.5;
    }
  }

  .auth-remembered__address {
    flex: 1 1 8rem;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
  }

  .auth-remembered__divider {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: var(--text-color-muted);
    font-size: 0.875rem;

    &::before,
    &::after {
      flex: 1;
      border-block-start: 1px solid var(--border-color);
      content: "";
    }
  }

  .auth-remembered__other {
    justify-self: center;
  }

  .account-header {
    display: grid;
    gap: 0.75rem;
  }

  .account-header__picture {
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .account-header__name {
    overflow-wrap: anywhere;
    font-weight: 500;
  }

  .account-header__address {
    color: var(--text-color-muted);
    overflow-wrap: anywhere;
  }

  .account-header__email {
    color: var(--text-color);
    font-weight: 500;
  }

  .devices__current {
    color: var(--text-color-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}