.tabs {
    position: relative;
}

.cursor {
    composes: absolute -v-pr w-0 h-2 ease-out duration-150 from global;
    background-color: var(--color-gray-900);
    bottom: 0;
    transform: translateX(-50%);
    /* transition: 0.8s ease; */
}

.tabs-content {
    position: relative;
    transition: height .24s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    overflow: hidden;
}

.tab-pane {
    composes: -v-px -v-py -v-text rounded from global;
    opacity: .6;
    width: 100%;
}

.tab-pane:hover, .tab-pane:global(.hover){
    opacity: .9;
}

.tab-pane-animated {
    top: 0;
    transition: left .24s cubic-bezier(0.18, 0.74, 0.78, 0.96) 0s;
}

.tab-pane:active, .tab-pane:global(.active) {
    background-color: transparent;
    font-weight: bold;
    opacity: 1;
}

.label {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    user-select:none;
}

.tabs-nav-wrapper {
    position: relative;
    overflow: hidden;
}

.tabs-nav {
    position: relative;
    display: flex;
}

.tabs-nav-scroll {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 30px;
    margin-top: -30px;
    transform: translateY(30px);
}

.tabs-nav-item {
    padding-left: .06rem;
    padding-right: .06rem;
}

.tabs-nav-selected {
    composes: -v-color-primary from global;
}

.tabs-divider {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.tabs-cursor {
    position: absolute;
    left: 0px;
    bottom: 0;
    height: 2px;
    background-color: var(--color-primary-500);
    transition: width .3s,left .3s,right .3s;
}