.music-monaco-editor-list {
    &-wrapper {
        font-size: 14px;
        line-height: 28px;
        height: 100%;
        background: var(--monaco-editor-background);
        color: var(--monaco-editor-foreground);
        // overflow: scroll;
        flex-shrink: 0;
        // padding: 5px 0 0 10px;
        box-sizing: border-box;

        .open-file-panel {
            border-bottom: 1px solid #ccc;

            .panel-header {
                display: flex;
                font-size: 12px;
                height: 24px;
                align-items: center;
                line-height: 24px;
                padding: 0 5px;
                justify-content: space-between;
                background: var(--monaco-editor-foldBackground);

                &-icon {
                    &:hover {
                        background: var(--monaco-editor-selectionBackground);
                    }
                }
            }

            .panel-body {
                height: 180px;
                overflow: auto;
            }

            .music-monaco-icons {
                margin-left: 5px !important;
            }

            .music-monaco-editor-list-file-item-row {
                height: 24px !important;
            }

            .music-monaco-editor-list-file-item-row-path {
                font-style: italic;
            }

            .empty {
                text-align: center;
                user-select: none;
                font-size: 12px;
            }
        }
    }

    /* 滚动槽 */
    &-wrapper::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    &-wrapper::-webkit-scrollbar-track {
        background: var(--monaco-editor-background);
        box-shadow: inset 0 0 5px var(--monaco-scrollbar-shadow);
        -webkit-box-shadow: inset 0 0 5px var(--monaco-scrollbar-shadow);
    }

    /* 滚动条滑块 */
    &-wrapper::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: var(--monaco-scrollbarSlider-background);
        box-shadow: inset 0 0 5px var(--monaco-scrollbar-shadow);
        -webkit-box-shadow: inset 0 0 5px var(--monaco-scrollbar-shadow);

        //TODO: 增加滚动条hover态展示
    }

    &-title {
        display: flex;
        padding: 0 5px;
        flex-direction: row;
        align-items: center;
        height: 24px;
        user-select: none;
        cursor: pointer;
        line-height: 24px;
        background: var(--monaco-editor-foldBackground);

        &-icon {
            font-size: 14px;
            cursor: pointer;
            color: var(--monaco-editor-foreground);
            margin-right: 4px;

            &:hover {
                background: var(--monaco-editor-selectionBackground);
            }
        }

        &-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &:hover &-icon {
            visibility: visible;
        }
    }

    &-split {
        &-icon {
            visibility: hidden;
            font-size: 16px;
            color: var(--monaco-editor-foreground);
            margin-right: 4px;

            &:hover {
                color: var(--monaco-list-hoverForeground);
            }
        }
    }

    &-close {
        &-icon {
            width: 10px;
            font-size: 16px;
            color: var(--monaco-editor-foreground);
            margin-left: 8px;

            &:hover {
                color: var(--monaco-list-hoverForeground);
            }
        }
    }

    &-file-item {
        user-select: none;

        &-new {
            position: relative;
            flex: 1;
            outline: none;
            border: 1px solid var(--monaco-editor-wordHighlightBorder);

            &:focus {
                cursor: text;
            }

            &-error {
                border: 1px solid #F44747;
            }
        }

        &-row {
            height: 28px;
            cursor: pointer;
            user-select: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;

            &:hover {
                background-color: var(--monaco-list-hoverBackground);
                color: var(--monaco-list-hoverForeground);
            }

            &:hover .music-monaco-editor-list-split-icon {
                visibility: visible;
            }

            &-focused {
                background-color: var(--monaco-list-focusBackground);
                color: var(--monaco-list-focusForeground);
            }

            &-selected {
                background-color: var(--monaco-list-activeSelectionBackground);
                color: var(--monaco-list-activeSelectionForeground);
            }

            &-name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &-path {
                font-size: 10px;
                margin-left: 5px;
            }
        }
    }

    &-files {
        height: calc(100% - 235px);
        overflow: auto;
    }
}