/* Seven Auth — the account drawer's own rules: the login/register tab
   switcher, the error the Google flow writes above the forms, and the
   greeting and logout the plugin adds to the Theme's account menu. The
   form primitives and the menu list are the Theme's. */
@layer components {
  /* tabs */
  .st-auth-tabs {
    display: flex;
    gap: 1px;
    margin-block-end: var(--st-space-md);
    border-block-end: 1px solid var(--st-border);
  }

  .st-auth-tabs__tab {
    flex: 1;
    padding: var(--st-space-sm) var(--st-space-xs);
    border: 0;
    background: transparent;
    font-weight: var(--st-font-weight-medium);
    cursor: pointer;
    color: var(--st-fg-muted);
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
  }

  .st-auth-tabs__tab[aria-selected="true"] {
    color: var(--st-fg);
    border-block-end-color: var(--st-fg);
  }

  /* errors */
  .st-auth-form__error {
    margin: 0;
    color: var(--st-error-fg);
    font-size: var(--st-font-size-sm);
  }

  .st-auth-form__error--global {
    padding: var(--st-space-xs) var(--st-space-sm);
    background: var(--st-error-bg);
    border-radius: var(--st-radius-md);
  }

  /* account menu additions */
  .st-account-menu__greeting {
    padding-block-end: var(--st-space-sm);
    border-block-end: 1px solid var(--st-border-subtle);
  }

  .st-account-menu__hello {
    color: var(--st-fg-muted);
    font-size: var(--st-font-size-sm);
  }

  .st-account-menu__name {
    display: block;
    font-size: var(--st-font-size-md);
    font-weight: var(--st-font-weight-semibold);
  }

  .st-account-menu__logout {
    margin-block-start: var(--st-space-xs);
    padding-block-start: var(--st-space-sm);
    border-block-start: 1px solid var(--st-border-subtle);
  }

  .st-account-menu__logout-btn {
    display: flex;
    align-items: center;
    gap: var(--st-space-sm);
    inline-size: 100%;
    padding: var(--st-space-sm);
    border: 0;
    background: transparent;
    text-align: start;
    color: var(--st-error-fg);
    cursor: pointer;
    border-radius: var(--st-radius-md);
    font: inherit;
  }

  .st-account-menu__logout-btn .st-account-menu__icon { color: inherit; }

  .st-account-menu__logout-btn:hover { background: var(--st-error-bg); }
}