.content-navigation {
    background-color: var(--backgrounds-card-primary);
    margin: 2.5rem 0 3rem;
    padding: 8px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.content-navigation .btn {
    font-family: var(--font-bold), sans-serif;
    color: var(--text-primary);
    white-space: nowrap;
    background-color: transparent;
    border-color: transparent;
    margin: 0;
}

.content-navigation .btn:hover {
    color: var(--text-link-primary);
    background-color: var(--backgrounds-card-secondary);
    border-color: var(--backgrounds-card-secondary);
}

.content-navigation .btn:focus,
.content-navigation .btn.focus {
    color: var(--text-link-primary);
    background-color: var(--backgrounds-card-secondary);
    border-color: var(--backgrounds-card-secondary);
    box-shadow: 0 0 0 2px #3D7DF9;
}

.content-navigation .btn:not(:disabled):not(.disabled):active:focus,
.content-navigation .btn:not(:disabled):not(.disabled).active:focus {
    color: var(--backgrounds-card-primary);
    background-color: var(--text-link-primary-hover);
    border-color: var(--text-link-primary-hover);
}

.content-navigation .btn.active {
    color: var(--text-primary-inverted);
    background-color: var(--text-primary);
    border-color: var(--text-primary);
}

.content-navigation .btn:not(:disabled):not(.disabled):active,
.content-navigation .btn:not(:disabled):not(.disabled).active {
    color: var(--text-primary-inverted);
    background-color: var(--text-primary);
    border-color: var(--text-primary);
}