/* Root */

.content-tabs .cmp-tabs {
    width: 100%;
}

/* Navigation */

.content-tabs .cmp-tabs__tablist {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5e7ef;
    list-style: none;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.content-tabs .cmp-tabs__tablist::-webkit-scrollbar {
    height: 4px;
}

/* Tab */

.content-tabs .cmp-tabs__tab {
    flex: 0 0 auto;
    padding: 14px 20px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #344666;
    cursor: pointer;
    white-space: nowrap;

    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    transition:
        background-color 180ms ease,
        color 180ms ease;
}

/* Active */

.content-tabs .cmp-tabs__tab--active {
    border-bottom-color: #ED1C24;
    background: #FFF4F4;
    border-radius: 4px 4px 0 0;
    color: #1c3157;
    font-weight: 600;
}

/* Focus */

.content-tabs .cmp-tabs__tab:focus-visible {
    outline: 2px solid #164d9a;
    outline-offset: -2px;
}

/* Panel */

.content-tabs .cmp-tabs__tabpanel {
    padding-top: 24px;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 200ms ease-out,
        transform 200ms ease-out;
}

.content-tabs .cmp-tabs__tabpanel--active {
    opacity: 1;
    transform: translateY(0);
}

/* Let Core control visibility */
.content-tabs .cmp-tabs__tabpanel[hidden] {
    display: none;
}

/* Mobile */

@media (max-width: 640px) {

    .content-tabs .cmp-tabs__tablist {
        gap: 4px;
    }

    .content-tabs .cmp-tabs__tab {
        padding-inline: 16px;
    }

}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .content-tabs .cmp-tabs__tab,
    .content-tabs .cmp-tabs__tabpanel {
        transition: none;
    }

}