/**
 * Quiet previous/next navigation for resources in an explicit Series.
 */

.f12-resource-series-nav {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 2.75rem;
}

.f12-resource-series-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--f12-space-3);
    min-height: 2.75rem;
    padding-inline: var(--f12-space-1);
    color: var(--f12-color-text-muted);
    font-size: var(--f12-font-size-sm);
    font-weight: var(--f12-font-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: color 160ms ease;
}

.f12-resource-series-nav .f12-resource-series-nav__link:visited {
    color: var(--f12-color-text-muted);
}

.f12-resource-series-nav .f12-resource-series-nav__link:hover,
.f12-resource-series-nav .f12-resource-series-nav__link:focus-visible,
.f12-resource-series-nav .f12-resource-series-nav__link:active {
    color: var(--f12-color-text-primary);
}

.f12-resource-series-nav__link:focus-visible {
    outline: 2px solid var(--f12-color-focus-outline);
    outline-offset: 3px;
    border-radius: var(--f12-radius-pill);
}

.f12-resource-series-nav__divider {
    width: 1px;
    height: 2rem;
    margin-inline: var(--f12-space-3);
    background: var(--f12-color-border-subtle);
}

.f12-resource-series-nav .f12-resource-series-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: var(--f12-radius-pill);
    background: var(--f12-color-surface-subtle);
    color: var(--f12-color-text-heading);
    font-size: 1.15rem;
    transition: background-color 160ms ease, transform 160ms ease;
}

.f12-resource-series-nav__link:hover .f12-resource-series-nav__icon,
.f12-resource-series-nav__link:focus-visible .f12-resource-series-nav__icon,
.f12-resource-series-nav__link:active .f12-resource-series-nav__icon {
    background: rgba(45, 45, 45, 0.1);
}

.f12-resource-series-nav__link--previous:hover .f12-resource-series-nav__icon {
    transform: translateX(-1px);
}

.f12-resource-series-nav__link--next:hover .f12-resource-series-nav__icon {
    transform: translateX(1px);
}