body {
    margin: 0;
    overflow: auto;
    font-family: sans-serif;
}

.floating-ui {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 8px;

    transition: all 0.7s allow-discrete;
}

#info-panel {
    bottom: 10px;
    right: 10px;
    width: 250px;
    overflow-x: auto;
    opacity: 0;
    display: none;

    @starting-style {
        & {
            opacity: 0;
            display: none;
        }
    }

    body:has(#inspectTool:checked) & {
        opacity: 1;
        display: block;
    }
}

@keyframes fadeAndMove {
    0% {
        opacity: 0;
        transform: translateX(-30vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

#ui {
    top: 10px;
    left: 10px;
    max-width: 200px;
    width: 200px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    transition: all 0.7s allow-discrete;
    display: block;
    opacity: 1;
    animation: fadeAndMove 0.7s ease;

    &.hidden {
        opacity: 0;
        animation: none;
    }

    fieldset {
        display: inline-block;
        border: none;
        background-color: #AAA3;
        padding: 0.2em;
        border-radius: 0.2em;
        margin: 0.2em 0;

        &.buttons {
            display: flex;
            button {
                font-size: 80% !important;
            }
        }
    }

    details {
        transition: all 500ms ease;

        margin-bottom: 5px;
        &:last-of-type {
            margin-bottom: 0;
        }
        & + hr {
            margin-top: 0;
        }

        padding-bottom: 3px;

        &[open] {
            filter: drop-shadow(2px 2px 0 rgb(202, 115, 115));
            border-bottom: 2px solid #ffffffaa;
            transform: translate(-2px, -2px);
        }
    }

    summary, .filename>input {
        details[open] & {
            margin: 10px 0 10px 0;
        }

        font-size: 16px;
        cursor: pointer;
        list-style: none;

        /* style to look like a button with a gradient and slight rounded border */
        background: linear-gradient(135deg, #444, #222);
        padding: 8px;
        border-radius: 4px;
        color: white;
        text-align: center;
        font-weight: bold;
        /* border: 1px solid #555; */
        clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    }

    .tile-preview {
        width: 100%;
    }

    label {

        & > input[type="radio"],
        & > input[type="checkbox"] {
            display: none;
        }

        & > .icon > img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }

        &:has(.icon) {
            flex-shrink: 1;
        }

        &.option {
            display: inline-block;
            align-items: center;
            gap: 8px;
            background: #222;
            color: #fff;
            padding: 6px 10px;
            border-radius: 4px;
            margin-bottom: 5px;
            cursor: pointer;
            border: 1px solid #444;
            transition: background 0.2s;
            font-size: 14px;
            position: relative;

            &:has(input[type="checkbox"]) {
                display: block;
                text-align: center;
                &::before {
                    content: "☐ ";
                    height: 1.5cap;
                    font-size: 1.5em;
                    display: inline-block;
                    vertical-align: sub;
                    overflow: clip;
                    margin-top: -0.5cap;
                }
            }

            &:has(input[type="checkbox"]:checked) {
                background: repeating-linear-gradient(
                    45deg,
                    orange,
                    orange 10px,
                    darkorange 10px,
                    darkorange 20px
                );
                color: black;
                &::before {
                    content: "☑ ";
                }
            }

            &:hover {
                background: #333;
            }
        }

        &:has(input[type="radio"]:checked) {
            font-weight: bold;
            color: orange;
            &>.icon>img {
                /* Use sepia and filters to make it orange, add a drop shadow to make it glow*/
                filter: brightness(0.5) sepia(1) saturate(15) brightness(1.2) drop-shadow(0 0 0.8px orange) drop-shadow(0 0 0.8px orange) drop-shadow(0 0 1px orange) drop-shadow(0 0 5px orange);
            }
        }
    }

    .filename {
        margin-top: 0;
        filter: drop-shadow(2px 2px 0 rgb(202, 115, 115));
        clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
        width: 100%;
        display: flex;

        &>input {
            padding-left: 32px;
            font-size: 16;
            background: #222;
            max-width: 100%;
            box-sizing: border-box;
            text-align: left;
            color: orange;
            border: 1px solid orange orange;
            cursor: text;
        }
    }

    button {
        display: block;
        width: 100%;
        margin-bottom: 5px;
        padding: 5px;
        font-size: 14px;
        background: #333;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;

        &#snapshot {
            background: orange;
            font-weight: bold;
        }

        &:hover {
            background: #555;
        }
    }
}

.thumbnail {
    width: 64px;
    height: 64px;
    object-fit: cover;
    margin: 5px;
    cursor: grab;
    clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}