.tabs__control {
    text-decoration: none;
    color: var(--color-contrast-medium)
}

.tabs__control:focus {
    outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline-offset: 2px
}

.tabs__control:hover {
    color: var(--color-contrast-high)
}

.tabs__control[aria-selected=true] {
    color: var(--color-contrast-high);
    text-decoration: underline
}

.tab-features-v2__controls-list {
    position: relative;
    display: flex;
    gap: var(--space-xs);
    overflow: auto
}

.tab-features-v2__controls-list>* {
    flex: 1 0 180px
}

.tab-features-v2__text-crop-gradient {
    position: sticky;
    top: 0;
    right: 0;
    flex: 0 0 40px;
    background: linear-gradient(to right, hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0), hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 1));
    pointer-events: none
}

.tab-features-v2__control {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
    padding: 0 0 var(--space-md);
    border: 0px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    border-bottom-width: 1px;
    transition: .2s
}

.tab-features-v2__control-title {
    display: block;
    color: var(--color-contrast-medium);
    font-weight: 500;
    margin-bottom: var(--space-2xs);
    transition: color .2s
}

.tab-features-v2__control-description {
    color: var(--color-contrast-medium);
    line-height: 1.4;
    font-size: var(--text-sm)
}

.tab-features-v2__control:hover {
    border-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.5)
}

.tab-features-v2__control:hover .tab-features-v2__control-title {
    color: var(--color-contrast-higher)
}

.tab-features-v2__control[aria-selected=true] {
    border-color: var(--color-primary)
}

.tab-features-v2__control[aria-selected=true] .tab-features-v2__control-title {
    color: var(--color-primary)
}

.tab-features-v2__panels {
    position: relative
}

.tab-features-v2__panel {
    opacity: 0
}

.tabs--no-interaction .tab-features-v2__panel {
    animation-duration: 0s;
    animation-delay: 0s
}

.tab-features-v2__panel--display {
    animation: tab-features-v2-panel-entry-anim .5s .2s var(--ease-out) forwards
}

.tab-features-v2__panel--hide {
    position: absolute;
    visibility: hidden;
    top: 0;
    width: 100%;
    transition: position 0s .5s, visibility 0s .5s;
    animation: tab-features-v2-panel-exit-anim .5s var(--ease-out)
}

@keyframes tab-features-v2-panel-entry-anim {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes tab-features-v2-panel-exit-anim {
    0% {
        opacity: 1;
        transform: translateY(0px)
    }

    100% {
        opacity: 0;
        transform: translateY(20px)
    }
}

@media(min-width:64rem) {
    .tab-features-v2__controls-list {
        flex-direction: column;
        overflow: visible
    }

    .tab-features-v2__controls-list>* {
        flex: 1 0 auto
    }

    .tab-features-v2__text-crop-gradient {
        display: none
    }

    .tab-features-v2__control {
        border-width: 0;
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md)
    }

    .tab-features-v2__control:hover,
    .tab-features-v2__control[aria-selected=true] {
        background-color: var(--color-bg-light);
        box-shadow: var(--shadow-sm)
    }
}