.tag-view-wrapper {
    height: 37px;
    box-shadow: 0 1px 4px var(--base-tag-shadow);
    background-color: var(--base-main-content-bg-color);
    border-bottom: 1px solid var(--base-tag-border);
    :deep(.tag-view-content) {
        height: 100%;
        .scroll-outer {
            height: 100%;
            overflow: hidden;
            z-index: 1;
            position: relative;
            &.no-arrow {
                margin-left: 15px;
                margin-right: 15px;
            }
            .scroll-body {
                transition: transform 0.3s ease;
                z-index: 1;
                white-space: nowrap;
                height: 100%;
                .tag-item {
                    border: 1px solid var(--base-tag-border);
                    border-radius: 4px;
                    padding: 7px 8px;
                    margin-right: 10px;
                    font-size: var(--el-font-size-base);
                    color: var(--el-text-color-regular);
                    transition: all 0.3s;
                    .close-icon {
                        display: none;
                    }
                    &.active {
                        background: var(--el-color-primary) !important;
                        color: var(--el-menu-active-color) !important;
                        border: none;
                        padding-left: 20px;
                        .close-icon:hover {
                            color: var(--el-menu-active-color) !important;
                        }
                        &::before {
                            position: absolute;
                            left: 7px;
                            top: 50%;
                            transform: translateY(-50%);
                            content: "";
                            background: var(--el-menu-active-color);
                            height: 8px;
                            width: 8px;
                            border-radius: 50%;
                        }
                    }
                    &:hover {
                        color: var(--el-color-primary);
                        .close-icon {
                            display: inline-flex;
                        }
                    }
                }
            }
        }
        .tag-arrow {
            width: 36px;
            z-index: 99;
            height: 100%;
            &.disabled {
                color: var(--el-disabled-text-color);
                cursor: not-allowed;
            }
        }
    }

    .tag-shadow {
        box-shadow: 0px 0px 8px var(--base-tag-shadow);
        cursor: pointer;
    }
    .tag-action {
        height: 100%;
        :deep(.base-icon) {
            height: 100%;
            width: 36px;
        }
        :deep(.base-icon:first-of-type) {
            padding: 0 9px;
        }
    }
}
