:root {
    --main-color: hsla(0, 0%, 80%, 1);
    --disabled-bg: hsla(0, 0%, 90%, 1);
    --bg: white;

    --space-sm: 4px;
    --space: 8px;
    --space-bg: 16px;
    --space-lg: 24px;

    --fs: clamp(20px, 1.6vh, 40px);
    --fs-mobile: 16px;

    --border-width: 2px;
    --list-item: clamp(82px, 7.5vh, 200px);;
}

* {
    background-color: var(--bg);
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    padding: var(--space-bg);
    font-size: var(--fs);
}

button:not([disabled]) {
    cursor: pointer;
}

button:disabled, select:disabled {
    background-color: var(--disabled-bg);
}

.cursor-p:not([disabled="true"]) {
    cursor: pointer;
}

#container {
    height: 100%;
}

#container:not(.game) {
    display: grid;
    grid-template-rows: 1fr min-content;
}

#container:not(.game) .top-buttons {
    height: calc(var(--list-item) * 0.66);
    border-top: calc(var(--space-sm) * 1.33) solid var(--main-color);
    padding-top: var(--space);

    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
}

#container:not(.game) .top-buttons .first,
#container:not(.game) .top-buttons .second {
    height: 100%;

    display: flex;
    gap: var(--space-sm);
}

#container:not(.game) input[type="file"] {
    display: none;
}

#container:not(.game) .top-buttons .add,
#container:not(.game) .top-buttons .save,
#container:not(.game) label[for="select-zip"],
#container:not(.game) .li-container .select-pic {
    display: inline-block;
    height: 100%;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-size: 70% 70%;
    background-position: center;
    border: var(--border-width) solid var(--main-color);
}

#container:not(.game) label[for="select-zip"] {
    background-image: url(./assets/zip-file-icon.svg);
}

#container:not(.game) .top-buttons .add {
    background-image: url(./assets/plus-icon.svg);
}

#container:not(.game) .top-buttons .save {
    background-image: url(./assets/download-icon.svg);
}

#container:not(.game) .top-buttons .select-game {
    border: var(--border-width) solid var(--main-color)
}

#container:not(.game) .list-container {
    display: grid;
    grid-auto-rows: var(--list-item);
    gap: var(--space);
    align-self: start;

    height: 100%;
    contain: size;
    padding-bottom: var(--space);
    overflow-y: auto;
}

#container:not(.game) .li-container {
    display: grid;
    grid-template-columns: auto 10fr auto calc(var(--list-item) / 3.33);
    gap: var(--space);
}

#container:not(.game) .li-container .select-pic {
    contain: size;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

#container:not(.game) .li-container .select-pic:not(:has(img)) {
    background-image: url(./assets/image-file-icon.svg);
}

#container:not(.game) .li-container .select-pic img {
    width: 100%;
    max-height: 100%;
}

#container:not(.game) .li-container .text {
    border: var(--border-width) solid var(--main-color);
    border-color: var(--main-color);
    font-size: inherit;
    padding: var(--space);
}

#container:not(.game) .li-container .select-group {
    display: grid;
    gap: var(--space-sm);
    grid-template-rows: 1fr 1fr;
}

#container:not(.game) .li-container .select-group select {
    font-size: inherit;
}

#container:not(.game) .li-container .arrow-group {
    display: grid;
    gap: var(--border-width);
    align-content: space-between;
    grid-template-rows: 1fr 1fr 1fr;
}

#container:not(.game) .li-container .arrow-group .up,
#container:not(.game) .li-container .arrow-group .down,
#container:not(.game) .li-container .arrow-group .delete {
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-size: 70% 70%;
    background-position: center;
    border: var(--border-width) solid var(--main-color);
}

#container:not(.game) .li-container .arrow-group .up {
    background-image: url(./assets/arrow-top-icon.svg);
    align-self: start;
}

#container:not(.game) .li-container .arrow-group .down {
    background-image: url(./assets/arrow-bottom-icon.svg);
    align-self: end;
}

#container:not(.game) .li-container .arrow-group .delete {
    background-image: url(./assets/recycle-bin-line-icon.svg);
    align-self: center;

}

@media (hover: hover) {
    #container:not(.game) label[for="select-zip"]:hover,
    #container:not(.game) .top-buttons .add:hover,
    #container:not(.game) .top-buttons .save:hover,
    #container:not(.game) .li-container .select-pic:hover,
    #container:not(.game) .li-container .arrow-group .up:not([disabled]):hover,
    #container:not(.game) .li-container .arrow-group .down:not([disabled]):hover,
    #container:not(.game) .li-container .arrow-group .delete:not([disabled]):hover {
        background-color: var(--main-color);
    }
}

@media (max-width: 600px) {
    body {
        padding: var(--space);
        font-size: var(--fs-mobile);
    }

    #container:not(.game) .top-buttons {
        padding-top: var(--space-sm);
        border-top-width: var(--border-width);
    }

    #container:not(.game) .list-container {
        padding-bottom: var(--space-sm);
    }

    #container:not(.game) .li-container {
        gap: var(--space-sm);
        grid-template-columns: auto 1fr calc(var(--list-item) / 3.33);
        grid-template-rows: 1fr 1fr;

        padding-bottom: var(--space-sm);
        border-bottom: var(--border-width) solid var(--main-color);
    }

    #container:not(.game) .li-container .select-pic {
        grid-row: 1 / 3;
        grid-column: 1;
        align-self: center;
    }

    #container:not(.game) .li-container .text {
        padding: var(--space-sm);

        grid-row: 1;
        grid-column: 2;
    }

    #container:not(.game) .li-container .select-group {
        grid-row: 2;
        grid-column: 2;
    }

    #container:not(.game) .li-container .arrow-group {
        grid-row: 1 / 3;
        grid-column: 3;
    }
}