:root {
    --padding: 10px;
    --bg-base: #444444;
    --bg-folder: rgba(255,255,255,.05);
    --bg-hover: black;
    --border-radius: 8px;

}
.mod-list {
    background-color: var(--bg-base);
    border-radius: 7px;
}
.folder,
.file {
    background-color: var(--bg-folder);
    border-radius: var(--border-radius);
    margin-top: var(--padding);
    /*! margin-bottom: calc(var(--padding) / 2); */
}
.folder[data-expanded] {
    padding-bottom: calc(var(--padding) / 2);
}

.folder:hover, .file:hover {
    cursor: pointer;
}
.folder > .header, .file > .header {
    padding: var(--padding);display: grid;
    grid-template-areas:
        "icon text";
    grid-template-columns: min-content 1fr;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}


.folder > .children {
    display: none;
    margin: var(--padding);
}
.folder[data-expanded] > .children {
    display: revert;
}

.folder[data-hover], .file[data-hover] {
    background-color: var(--bg-hover);
}

.folder > .header:before,
.file > .header:before {
    grid-area: icon;
    content: "\f07b";
    font-family: "Font Awesome 5 Pro";
    margin-right: calc(var(--padding) / 2);
    font-weight: bold;
}
.folder[data-expanded] > .header:before {
    content: "\f07c";
}
.file > .header:before {
    content: "\f019";
}

.folder.image[data-expanded] > .children {
    display: grid;
    grid-auto-flow: dense;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.folder.image > .children > .image {
    width: auto;
    height: auto;
    object-fit: contain;
    display: flex;
    align-content: center;
    justify-content: center;
}
.folder.image > .children > .image > a > img {
    max-width: 100%;
    max-height: 100%;
    display: block; /* remove extra space below image */
}