.vue-tablist {
    display: flex;
    margin: 0;
    margin-bottom: $content-padding-small-vertical;
    padding: 0;
    border-bottom: 1px solid $tabs-bottom-border-color;
    list-style: none;
}

.vue-tab {
    position: relative;
    bottom: -1px;
    margin-right: 1px;
    padding: 10px 16px;
    border-bottom: 2px solid $tabs-bottom-border-color;
    border-radius: $input-border-radius $input-border-radius 0 0;
    background-color: $bg-color-side-nav;
    color: $text-nav-color;
    user-select: none;
    cursor: pointer;

    .fas,
    .far,
    .fab {
        margin-right: 0.3rem;
    }
}

.vue-tab[aria-selected='true'] {
    border-color: $tabs-active-bottom-border-color;
    color: $color-tab-active;
}

.vue-tab[aria-disabled='true'] {
    color: $text-muted-color;
    cursor: not-allowed;
}

@media (min-width: $screen-desktop) {
    .vue-tablist {
        margin-bottom: $content-padding-large-vertical;
    }
}
