/**
 * Shared top bar for the frontend auth pages (login, register, scan login):
 * the official breadcrumbs on the left and a consistent muted back link at
 * the right edge of the breadcrumb row. Frontend-only context, so the
 * sukanTheme `--sukan-*` custom properties are available.
 */

.sukan_auth_topbar {
    align-items: center;
    display: flex;
    gap: var(--sukan-space-4, 1rem);
    margin-block-end: var(--sukan-space-5, 1.5rem);
}

.sukan_auth_topbar .cmp_breadcrumbs {
    flex: 1 1 auto;
    margin-block-end: 0;
    min-inline-size: 0;
}

.sukan_auth_topbar .sukan_auth_back {
    flex: none;
    margin-inline-start: auto;
}

.sukan_auth_back {
    align-items: center;
    background: transparent;
    border: 1px solid var(--sukan-color-border, #cbd5e1);
    border-radius: var(--sukan-radius-small, 0.25rem);
    color: var(--sukan-color-text-muted, #6b7280);
    display: inline-flex;
    font-size: var(--sukan-font-size-small, 0.875rem);
    gap: var(--sukan-space-2, 0.5rem);
    line-height: var(--sukan-line-height-control, 1.25);
    min-block-size: 2.25rem;
    padding: 0.35rem 0.875rem;
    text-decoration: none;
    transition: color var(--sukan-duration-standard, 160ms) ease,
        border-color var(--sukan-duration-standard, 160ms) ease;
}

.sukan_auth_back:hover,
.sukan_auth_back:focus-visible {
    border-color: var(--sukan-color-interactive, #3498db);
    color: var(--sukan-color-interactive-hover, #2980b9);
}

.sukan_auth_back:focus-visible {
    outline: var(--sukan-focus-width, 0.1875rem) solid var(--sukan-color-focus, #005fcc);
    outline-offset: var(--sukan-focus-offset, 0.1875rem);
}

.sukan_auth_back__icon {
    block-size: 1rem;
    flex: none;
    inline-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .sukan_auth_back {
        transition: none;
    }
}