.tabs-container {
    border-radius: 0;
    overflow: hidden;
    padding: 0;
    position: relative;

    [role='tablist'] {
        @extend %vf-pseudo-border--bottom;
        display: flex;
        font-size: 0;
        margin: 0 auto 0;
        overflow-x: auto;
        padding: 0;
        position: relative;
        white-space: nowrap;
        width: 100%;
    }
    li[role='presentation'] {
        display: inline-block;
        float: none;
        font-size: 1rem;
        margin: 0;
        padding: 0;
        width: auto;
        &:last-child {
            margin-right: $sp-xxx-large;
        }
    }
}
[role='tab'] {
    color: $color-x-dark;
    display: inline-block;
    padding: $spv-intra--expanded $sph-intra;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
    border-left: 2px solid transparent;
    &:visited,
    &:active,
    &:hover {
        color: $color-x-dark;
        text-decoration: none;
        cursor: pointer;
    }
    &:hover,
    &[aria-selected='true'] {
        position: relative;
        border-bottom: $bar-thickness solid $color-tabs-active-bar;
    }
    &:focus {
        outline: 0;
        border-top: 2px solid $color-focus;
        border-right: 2px solid $color-focus;
        border-left: 2px solid $color-focus;
    }
}
[role='tabpanel'] {
    padding: 0.5rem;
    border: 2px solid transparent;
    &:focus {
        border: 2px solid $color-focus;
    }
}