:root {
    --list-btn-color: #778;
    --list-btn-bg: #f6f6f6;
    --list-btn-hover-bg: #e6e6e6;
    --list-btn-border: #bfbfbf;
    --list-btn-border-bottom: #b0b0b0;
    --list-btn-border-left: #e0e0e0;
    --list-btn-hover-border-left: #c9c9c9;
    --list-btn-focus: #6699cc;
    --list-file-link: #224;
    --list-file-visited: #66c;
    --list-file-active: #000;
    --list-file-info: #778;
    --list-selected-bg: #fff5eb;
    --list-selected-border: #ffb271;
}

:root[data-theme="dark"] {
    --list-btn-color: #b0b1b3;
    --list-btn-bg: #1a1a1a;
    --list-btn-hover-bg: #252525;
    --list-btn-border: #333;
    --list-btn-border-bottom: #2a2a2a;
    --list-btn-border-left: #222;
    --list-btn-hover-border-left: #2a2a2a;
    --list-btn-focus: #4a7ba7;
    --list-file-link: #ccc;
    --list-file-visited: #b8a0d8;
    --list-file-active: #e0e1e3;
    --list-file-info: #888;
    --list-selected-bg: #231911;
    --list-selected-border: #ffb271;
}

html
{
    height: 100%;
}

body
{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

#fileWrapper {
    position: relative;
    float: left;
    margin-top: 2px;
    height: 28px;
    width: 100px;
    overflow: hidden;
}

    #fileWrapper:hover > #fileWrapperContent {
        background-color: var(--list-btn-hover-bg);
    }

#inFile {
    cursor: pointer;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    font-size: 50px;
    opacity: 0;
}

#fileWrapperContent {
    height: 26px;
    line-height: 26px;
    position: relative;
    font-size: 12px;
    font-family: verdana;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--list-btn-color);
    background-color: var(--list-btn-bg);
    border: 1px solid var(--list-btn-border);
    border-bottom-color: var(--list-btn-border-bottom);
    border-left-color: var(--list-btn-border-left);
    text-align: center;
    cursor: pointer;
}

    #fileWrapperContent.fileWrapperFocus {
        background-color: var(--list-btn-hover-bg);
    }

    #fileWrapperContent:active, #fileWrapperContent:focus {
        outline: var(--list-btn-focus) auto 1px;
    }

#divButtons {
    margin-left: 106px;
}

    #divButtons > button, #divButtons > select {
        width: 32px;
        height: 28px;
        color: var(--list-btn-color);
        margin: 0;
        margin-top: 2px;
        cursor: pointer;
        background-color: var(--list-btn-bg);
        border: 1px solid var(--list-btn-border);
        border-bottom-color: var(--list-btn-border-bottom);
        border-left-color: var(--list-btn-border-left);
        border-radius: 0;
        font-size: 0;
        vertical-align: middle;
    }

    #divButtons > #selSort {
        font-family: Verdana;
        font-size: 12px;
        width: 64px;
        appearance: none;
        text-align: center;
    }

    #divButtons > #btnSort {
        width: 32px;
    }

    #divButtons > button:hover, #divButtons > select:hover {
        background-color: var(--list-btn-hover-bg);
        border-left-color: var(--list-btn-hover-border-left);
    }

    #divButtons > button:active, #divButtons > select:active, #divButtons > button:focus, #divButtons > select:focus {
        outline: var(--list-btn-focus) auto 1px;
    }

#divTools
{
    margin: 4px;
}

#divData
{
    margin: 4px;
    clear: both;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.divFileItem, .selected, .deleted {
    font-family: verdana;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1px solid transparent;
}

.selected {
    background-color: var(--list-selected-bg);
    border: 1px solid var(--list-selected-border);
}

.deleted {
    text-decoration: line-through;
}

.imgFileIcon {
    flex-shrink: 0;
}

.sectionFile {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
}

.anchorFile {
    text-decoration: none;
    cursor: pointer;
    color: #024;
    white-space: nowrap;
}

    .anchorFile::after {
        content: "";
        display: inline-block;
        width: 11px;
        height: 11px;
        margin: 0;
        margin-left: 3px;
        vertical-align: baseline;
        -webkit-mask: url(icon-external-link.svg) no-repeat center / contain;
        mask: url(icon-external-link.svg) no-repeat center / contain;
        background-color: currentColor;
    }

    .anchorFile:link {
        color: var(--list-file-link);
    }

    .anchorFile:visited {
        color: var(--list-file-visited);
    }

    .anchorFile:active {
        color: var(--list-file-active);
    }

.sectionFileInfo {
    margin-top: 1px;
    font-size: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

    .sectionFileInfo > span {
        color: var(--list-file-info);
        white-space: nowrap;
    }

svg.icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
