.el-segmented {
    --el-segmented-radius: var(--el-border-radius-base);
    --el-segmented-padding: 3px;
    --el-segmented-bg: var(--el-fill-color-light);
    --el-segmented-height: 28px;
    --el-segmented-font-size: 14px;
    --el-segmented-item-padding: 12px;
    --el-segmented-color: var(--el-text-color-secondary);
    --el-segmented-active-color: var(--el-text-color-primary);
    --el-segmented-active-bg: var(--el-bg-color-overlay);
    --el-segmented-active-shadow: 0 1px 3px 0 rgb(0 0 0 / 8%);
    --el-segmented-hover-bg: rgb(0 0 0 / 4%);
    --el-segmented-disabled-color: var(--el-text-color-placeholder);

    // :deep {
    &.is-block {
        .el-tabs__header {
            display: inline-block;
        }
    }
    .el-tabs__header {
        box-sizing: border-box;
        padding: var(--el-segmented-padding);
        margin: 0;
        background: var(--el-segmented-bg);
        border-radius: var(--el-segmented-radius);
    }
    .el-tabs__nav-scroll,
    .el-tabs__nav-wrap {
        margin: 0;
        overflow: visible;
    }
    .el-tabs__nav-wrap {
        &::after {
            display: none;
        }
    }
    .el-tabs__nav {
        float: none;
        &:not(:has(.is-active)) {
            .el-tabs__active-bar {
                padding: 0;
            }
        }
        .el-tabs__item {
            z-index: 2;
            height: var(--el-segmented-height);
            padding: 0 var(--el-segmented-item-padding);
            font-size: var(--el-segmented-font-size);
            line-height: var(--el-segmented-height);
            color: var(--el-segmented-color);
            background: none;
            border-radius: var(--el-segmented-radius);
            transition: color 0.2s, background-color 0.2s;
            &:not(.is-disabled) {
                &.is-active {
                    color: var(--el-segmented-active-color) !important;
                    background: none !important;
                }
                &:hover {
                    color: var(--el-segmented-active-color);
                    background: var(--el-segmented-hover-bg);
                }
            }
        }
    }
    .el-tabs__active-bar {
        top: 0;
        bottom: 0;
        box-sizing: content-box;
        height: auto;
        height: 28px;
        padding: 0 var(--el-segmented-item-padding);
        margin-left: calc(0px - var(--el-segmented-item-padding));
        background: var(--el-segmented-active-bg);
        border-radius: var(--el-segmented-radius);
        box-shadow: var(--el-segmented-active-shadow);
        transform: translate(var(--el-segmented-item-padding));
    }

    // }
}
