.skip-links {
    position: relative;
    z-index: var(--tfg-z-modal, var(--z-tooltip, 800));
}

.skip-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--tfg-space-3, 0.75rem);
    left: var(--tfg-space-3, 0.75rem);
    max-width: calc(100vw - (var(--tfg-space-3, 0.75rem) * 2));
    min-width: var(--tfg-control-min-height, 2.75rem);
    min-height: var(--tfg-control-min-height, 2.75rem);
    margin: 0;
    padding: var(--tfg-space-2, 0.5rem) var(--tfg-space-4, 1rem);
    overflow: visible;
    transform: translateY(calc(-100% - var(--tfg-space-6, 2rem)));
    border-radius: var(--tfg-radius-sm, 0.625rem);
    border: var(--tfg-border-hairline, 0.0625rem) solid var(--color-separator);
    background: var(--glass-thick-bg);
    color: var(--color-text-primary);
    box-shadow: var(--glass-shadow-md);
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    white-space: normal;
    z-index: var(--tfg-z-modal, var(--z-tooltip, 800));
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    outline: none;
}

.skip-link:nth-of-type(2) {
    top: calc(var(--tfg-space-3, 0.75rem) + var(--tfg-touch-min-height, 3rem) + var(--tfg-space-2, 0.5rem));
}

@media (max-width: 48rem) {
    .skip-link {
        min-width: var(--tfg-touch-min-height, 3rem);
        min-height: var(--tfg-touch-min-height, 3rem);
    }
}