@import url("../common.css");

html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #F9EFF9;
    image-rendering: pixelated;
    user-select: none;
}

body {
    margin:0;
    overflow:clip;
    display:flex;
    /*align-items: center;*/
    flex-direction: column;
    height: 100%;
}

.button {
    background: #F9EFF9;
    border: 2px solid;
    border-color: whitesmoke var(--lilith-scrollbar-inner-color) var(--lilith-scrollbar-inner-color) whitesmoke;
    aspect-ratio: 1/1;
    text-align: center;
    /*line-height: 100%;*/
    font-family: var(--lilith-tiny-text);
    color: var(--lilith-window-text-color);
    cursor: var(--lilith-cursor-click);
}

#file-path {
    background: #F9EFF9;
    border: 2px solid var(--lilith-scrollbar-inner-color);
    /*color: var(--lilith-scrollbar-inner-color);*/
    color: var(--lilith-window-text-color);
    font-family: var(--lilith-tiny-text);
    white-space: nowrap;
    overflow: hidden;
    /*margin: 4px;
    width: calc(100% - 4px - 8px);
    height: calc(100% - 4px - 8px);*/
    /*line-height: 100px;*/
    padding-left: 4px;
    padding-right: 4px;
    line-height: 24px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

#top-bar {
    height: calc(32px - 8px);
    background: #F0D1F1;
    border-bottom: 2px solid var(--lilith-scrollbar-inner-color);
    display: flex;
    flex-direction: row;
    padding: 4px;
    gap: 4px;
}

#bottom-content {
    display:flex;
    flex-direction:row;
    flex-grow:1;
    overflow: hidden;
    /*overflow-y: auto;
    scrollbar-color: var(--lilith-scrollbar-inner-color) var(--lilith-scrollbar-outer-color);
    scrollbar-width: thin;*/
}

#explorer {
    min-width: 100px;
    border-right: 2px solid #F0D1F1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
}

#files {
    flex-grow: 1;
    border-left: 2px solid var(--lilith-scrollbar-inner-color);
    display: flex;
    /*padding: 72px 53px;*/
    padding: 20px;
    gap: 36px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;

    overflow-y: auto;
    scrollbar-color: var(--lilith-scrollbar-inner-color) var(--lilith-scrollbar-outer-color);
    scrollbar-width: thin;
}

.file-item {
    display:flex; flex-direction: column;
    gap: 4px;
    color: var(--lilith-window-text-color);
    image-rendering: pixelated;
    text-align: center;
    font-family: var(--lilith-tiny-text);
    font-size: 1em;
    align-items: center;
    width: 100px;
    height: 100px;
    cursor: var(--lilith-cursor-click);
}

.file-icon {
    height: 64px;
    /*aspect-ratio: 1/1;*/
}

.file-title {
    width: 128px;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
    font-family: var(--lilith-small-text);
    font-size: 20px;
}

.explorer-item {
    image-rendering: pixelated;
    font-family: var(--lilith-tiny-text);
    color: var(--lilith-window-text-color);
    display:flex;
    align-items: end;
    gap: 4px;
    cursor: var(--lilith-cursor-click);
    /*padding: 4px;*/
}

.explorer-item:hover {
    background: var(--lilith-window-text-color);
}

.explorer-item:hover > img {
    filter: brightness(100);
}

.explorer-item:hover > span {
    color: white;
}

.shrink {
    flex-shrink: 1;
}

.no-shrink {
    flex-shrink: 0;
}