@layer base, layout, components, pages;

@layer layout {
  .auth-page {
    display: grid;
    place-items: start center;
    padding-block-start: var(--size-7);
  }
}

@layer components {
  .auth-card {
    inline-size: min(100%, calc(var(--size-12) * 4));
    display: grid;
    gap: var(--size-3);
    padding: var(--size-5);
  }

  .auth-form {
    display: grid;
    gap: var(--size-2);
  }

  .auth-form input {
    inline-size: 100%;
    min-inline-size: 0;
    border: var(--border-width-0) solid var(--neutral-5);
    background: var(--neutral-1);
    padding: var(--size-1) var(--size-2);
    color: var(--neutral-12);
  }

  .auth-error {
    border-inline-start: var(--border-width-1) solid var(--error-8);
    padding-inline-start: var(--size-2);
    color: var(--error-10);
  }

  .auth-error:empty,
  .auth-help:empty {
    display: none;
  }

  .auth-help {
    color: var(--neutral-8);
    font-size: var(--font-size--1);
  }
}