* {
    margin: 0;
    padding: 0;
}

:root {
    --sp-color-success: #67c23a;
    --sp-color-success-light-3: #95d475;
    --sp-color-success-light-5: #b3e19d;
    --sp-color-success-light-7: #d1edc4;
    --sp-color-success-light-8: #e1f3d8;
    --sp-color-success-light-9: #f0f9eb;
    --sp-color-success-dark-2: #529b2e;
    --sp-color-warning: #e6a23c;
    --sp-color-warning-light-3: #eebe77;
    --sp-color-warning-light-5: #f3d19e;
    --sp-color-warning-light-7: #f8e3c5;
    --sp-color-warning-light-8: #faecd8;
    --sp-color-warning-light-9: #fdf6ec;
    --sp-color-warning-dark-2: #b88230;
    --sp-color-danger: #f56c6c;
    --sp-color-danger-light-3: #f89898;
    --sp-color-danger-light-5: #fab6b6;
    --sp-color-danger-light-7: #fcd3d3;
    --sp-color-danger-light-8: #fde2e2;
    --sp-color-danger-light-9: #fef0f0;
    --sp-color-danger-dark-2: #c45656;
    --sp-color-info: #909399;
    --sp-color-info-light-3: #b1b3b8;
    --sp-color-info-light-5: #c8c9cc;
    --sp-color-info-light-7: #dedfe0;
    --sp-color-info-light-8: #e9e9eb;
    --sp-color-info-light-9: #f4f4f5;
    --sp-color-info-dark-2: #73767a;

    --sp-text-color-primary: #303133;
    --sp-text-color-regular: #606266;
    --sp-text-color-secondary: #909399;
    --sp-text-color-placeholder: #a8abb2;
    --sp-text-color-disabled: #c0c4cc;
    --sp-border-color: #dcdfe6;
    --sp-border-color-light: #e4e7ed;
    --sp-border-color-lighter: #ebeef5;
    --sp-border-color-extra-light: #f2f6fc;
    --sp-border-color-dark: #d4d7de;
    --sp-border-color-darker: #cdd0d6;
    --sp-border: 1px solid var(--sp-border-color);

    --sp-fill-color: #f0f2f5;
    --sp-fill-color-light: #f5f7fa;
    --sp-fill-color-lighter: #fafafa;
    --sp-fill-color-extra-light: #fafcff;
    --sp-fill-color-dark: #ebedf0;
    --sp-fill-color-darker: #e6e8eb;
    --sp-fill-color-blank: #ffffff;

    --sp-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
    --sp-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
    --sp-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
    --sp-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px
}


/* 通用组件 */

/* 按钮 */

.sp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
    color: var(--sp-text-color-regular);
    box-sizing: border-box;
}

.sp-button:hover {
    background-color: var(--sp-fill-color-dark);
}

.sp-button:active {
    background-color: var(--sp-fill-color-darker);
}

.sp-button>.icon {
    width: 24px;
    height: 24px;
    fill: var(--sp-text-color-regular);
}

.sp-button.icon-label-button {
    gap: 8px;
}

.sp-button.sp-size-large {
    font-size: 16px;
}

.sp-button.sp-size-large>.icon {
    width: 28px;
    height: 28px;
}

.sp-button.sp-size-small {
    font-size: 14px;
}

.sp-button.sp-size-small>.icon {
    width: 20px;
    height: 20px;
}


/* 面板 */

.sp-panel {
    border: var(--sp-border);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--sp-fill-color-blank);
}

.sp-panel+.sp-panel {
    margin-top: 16px;
}


/* 菜单 */

.sp-menu {
    position: absolute;
    border: var(--sp-border);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--sp-fill-color-blank);
    box-shadow: var(--sp-box-shadow-light);
    min-width: 150px;
}

.sp-menu-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--sp-text-color-regular);
    gap: 8px;
    min-height: 32px;
    box-sizing: border-box;
}

@media screen and (max-width: 760px) {
    .sp-menu-item {
        min-height: 40px;
    }
}

.sp-menu-item:hover {
    background-color: var(--sp-fill-color-light);
}

.sp-menu-item>.icon {
    width: 24px;
    height: 24px;
    fill: var(--sp-text-color-regular);
}

.sp-menu-item.sp-danger {
    color: var(--sp-color-danger);
}

.sp-menu-item.sp-danger:hover {
    background-color: var(--sp-color-danger-light-9);
}

.sp-menu-item.sp-danger>.icon {
    fill: var(--sp-color-danger);
}

.sp-menu-item.sp-disabled {
    pointer-events: none;
    /* opacity: 0.5; */
    color: var(--sp-text-color-disabled);
}

.sp-menu-item.sp-disabled>.icon {
    fill: var(--sp-text-color-disabled);
}

.sp-menu-hr {
    border-bottom: var(--sp-border);
    margin: 4px 0;
}


/* 自定义组件 */

#sp-file-system {
    width: 100vw;
    min-height: 100vh;
}

.sp-file-system-content {
    margin: 0 auto;
    width: min(100vw, 1000px);
    padding: 16px;
    box-sizing: border-box;
}


/* 顶部栏 */

.sp-file-system-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    height: 50px;
    box-sizing: border-box;
}

#topbar-back-btn {
    padding-left: 0;
    gap: 0;
}

@media screen and (max-width: 760px) {
    .sp-file-system-topbar {
        height: 56px;
    }

    .sp-file-system-topbar .sp-button {
        min-height: 40px;
    }
}


/* 文件列表面板 */

.file-list-panel {
    /* border: var(--sp-border);
    border-radius: 4px; */
}

.file-list-top {
    border-bottom: var(--sp-border);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    padding: 8px;
    gap: 4px;
    background-color: var(--sp-fill-color-light);
    box-sizing: border-box;
    min-height: 50px;
}

.file-list-top .sp-vertical-hr {
    border-right: var(--sp-border);
    height: 32px;
    margin: 0 4px;
}

@media screen and (max-width: 760px) {
    .file-list-top {
        min-height: 56px;
    }

    .file-list-top .sp-vertical-hr {
        height: 40px;
    }

    .file-list-top .sp-button {
        min-height: 40px;
    }

    .file-list-top .sp-button.icon-label-button>.label {
        display: none;
    }
}

.file-list {

}

.file-item {
    display: flex;
    gap: 8px;
    min-height: 36px;
    align-items: center;
    padding: 0 8px;
    cursor: pointer;
    box-sizing: border-box;
}

@media screen and (max-width: 760px) {
    .file-item {
        min-height: 48px;
    }
}

.file-item:hover {
    background-color: var(--sp-fill-color-light);
}

.file-item-icon {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: var(--sp-text-color-regular);
}

.file-item-icon>svg {
    width: 20px;
}

.file-item-name {
    flex: 1;
    font-size: 14px;
    color: var(--sp-text-color-regular);
}

.file-item-info {
    font-size: 12px;
    color: var(--sp-text-color-secondary);
}

@media screen and (max-width: 760px) {
    .file-item-info {
        display: none;
    }
}

.file-item+.file-item {
    border-top: var(--sp-border);
}

.file-list-bottom {
    border-top: var(--sp-border);
    font-size: 14px;
    padding: 4px 16px;
    color: var(--sp-text-color-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* 文件预览面板 */

.file-preview-panel {
    /* border: var(--sp-border);
    border-radius: 4px; */
}

.file-preview-title {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: var(--sp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    box-sizing: border-box;
}

.file-preview-file-name {
    color: var(--sp-text-color-primary);
}

.file-preview-content {
    padding: 16px 32px;
}

.file-preview-content .source-code {
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: 14px;
    color: var(--sp-text-color-regular);
}

@media screen and (max-width: 760px) {
    .file-preview-title {
        height: 56px;
    }
}