:root {
    --td: .15s;
    --main-h: 2rem;
    --main-m: 1rem;
    --op-place-m: 2rem;
}

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, 8rem);
    justify-content: center;
    gap: .5rem;
    margin-top: var(--main-m);
    height: var(--main-h);
    view-transition-name: main-data-op-row;

    > [data-op] {
        font-family: 'Rajdhani';
        justify-items: center;
        align-items: center;
        padding: .4rem 0;
        display: flex;
        border-bottom: 4px solid var(--bg-clr);
        background-color: #202020;
        cursor: pointer;
        user-select: none;
        font-size: 1.2rem;
        transition: all .3s ease;
        justify-content: space-evenly;
        box-shadow: 0 1px 2px 1px #1b1b1b;

        &:hover {
            border-color: #656565;
        }
        &[data-active="true"] {
            border-color: #656565;
        }

        > img {
            padding-top: .2rem;
            width: 1.5rem;
        }
    }

}



[data-op-place] {
    display: flex;
    justify-content: center;
    margin-top: var(--op-place-m);
    margin-bottom: 5rem;

    &[data-op-place="upload-new"] {
        > form {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;

            --up-w: 50dvw;
            --up-h: 5rem;

            &[data-has-file="true"] {
                > label {
                    display: none;
                }
            }
            &[data-has-file="false"] {
                > #image-preview-container {
                    display: none;
                }
            }

            > #image-preview-container {
                position: absolute;
                width: 50rem;
                max-width: 90dvw;
                height: 30rem;
                max-height: calc(
                    100dvh
                    - var(--main-h)
                    - var(--main-m)
                    - var(--navbar-height)
                    - var(--op-place-m)
                );

                > #crop-buttons {
                    position: absolute;
                    height: 2.5rem;
                    right: 0;
                    bottom: -2.5rem;
                    display: flex;
                    gap: .5rem;

                    > button {
                        border-top-left-radius: 0;
                        border-top-right-radius: 0;
                        font-family: 'Rajdhani';
                        font-size: 1.2rem;
                        color: #aeaeae;
                        > img {
                            filter: opacity(.69);
                        }
                    }
                }
            }

            > label {
                min-width: var(--up-w);
                min-height: var(--up-h);
                border: 3px dashed #aeaeae8f;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;

                > img {
                    &:not(#image-preview) {
                        width: 3rem;
                    }
                    &#image-preview {
                        display: none;
                    }
                }
                > input {
                    min-width: var(--up-w);
                    min-height: var(--up-h);
                    padding: 0;
                    appearance: none;
                    position: absolute;
                    opacity: 0;
                    z-index: 1;
                    cursor: pointer;
                }
            }
        }
    }

    &[data-op-place="images-list"] {
        --btn-hover-size: 1.05;
        --black-drop-shadow: drop-shadow(2px 4px 6px black);
        
        > table {
            > thead {
                > tr {
                    > th {
                        color: #aeaeae;
                        font-family: 'Rajdhani';
                        padding: .5rem 1rem;
                        font-weight: 400;
                    }
                }
            }
            > tbody {
                > tr {
                    > td {
                        &[data-w="image"] {
                            > img {
                                cursor: pointer;
                                width: 8rem;
                                aspect-ratio: 2 / 1;
                                object-fit: contain;
                                filter: drop-shadow(0px 0px 2px #111);
                            }
                        }

                        &[data-w="created"],
                        &[data-w="updated"] {
                            padding-inline: .5rem;

                            > div {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-end;

                                > p {
                                    color: #aeaeae;
                                    font-size: .9rem;
                                }
                            }
                        }

                        &[data-w="in-rotation"] > div {
                            display: grid;
                            place-items: center;
                            grid-template-areas: 'center';
                            margin-inline: auto;
                            width: fit-content;

                            &[data-in-rotation="false"] > img[data-in="false"],
                            &[data-in-rotation="true"] > img[data-in="true"] {
                                opacity: 1;
                            }

                            &[data-in-rotation="false"] > img[data-in="true"],
                            &[data-in-rotation="true"] > img[data-in="false"] {
                                opacity: 0;
                                filter: blur(2px);
                            }

                            &:active > img {
                                scale: .8;
                            }
                            &:hover > img {
                                scale: var(--btn-hover-size);
                            }

                            > img {
                                grid-area: center;
                                transition: all var(--td) ease;
                                cursor: pointer;

                                &[data-in="true"] {
                                    filter: var(--green-svg-filter) var(--black-drop-shadow);
                                }
                                &[data-in="false"] {
                                    filter: var(--red-svg-filter) var(--black-drop-shadow);
                                }
                            }
                        }

                        &[data-w="show-now"] > div {
                            display: grid;
                            place-items: center;
                            grid-template-areas: 'center';
                            margin-inline: auto;
                            width: fit-content;

                            > img[data-changing],
                            > img[data-current],
                            > img[data-show-now] {
                                opacity: 0;
                                filter: blur(2px);
                            }

                            &[data-showing="true"] > img[data-current] {
                                opacity: 1;
                                filter: drop-shadow(#c0b379 0 0 1px) brightness(1.1) var(--black-drop-shadow);
                            }
                            &[data-changing="true"] > img[data-changing] {
                                opacity: 1;
                                filter: var(--black-drop-shadow);
                                animation: loader-spin 1s linear infinite;
                            }
                            &[data-showing="false"][data-changing="false"] > img[data-show-now] {
                                opacity: .8;
                                filter: var(--black-drop-shadow);
                            }

                            &:hover > img {
                                scale: var(--btn-hover-size);
                            }
                            > img {
                                grid-area: center;
                                transition: all var(--td) ease;
                                cursor: pointer;
                            }
                        }

                        &[data-w="delete"] {
                            > div {
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                > img {
                                    width: 2rem;
                                    cursor: pointer;
                                    transition: all var(--td) ease;
                                    filter: var(--red-svg-filter) brightness(.8) opacity(.9) var(--black-drop-shadow);

                                    &:hover {
                                        scale: var(--btn-hover-size);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &[data-op-place="settings"] {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;

        > [data-dvdr] {
            flex-basis: 100%;

            &::after {
                --_w: 55dvw;
                content: '';
                background-color: #606060;
                display: block;
                width: var(--_w);
                height: 2px;
                position: absolute;
                left: calc(50% - (var(--_w) / 2));
            }
        }

        > label {
            height: 6rem;
            width: 15rem;

            > fieldset {
                padding: .2rem .5rem;
                display: flex;
                gap: .5rem;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;

                > legend {
                    padding: 0 .5rem .2rem;
                }

                > input[type="checkbox"] {
                    width: 1.5rem;
                    aspect-ratio: 1;
                    cursor: pointer;
                    accent-color: #c0b379;
                    transition: all var(--td) ease;
                }
                > input[type="number"] {
                    width: 4rem;
                    padding: .2rem .5rem;
                    background-color: transparent;
                    border-radius: 7px;
                    border: 1px solid #aeaeae8f;
                    color: #aeaeae;
                    font-size: 1rem;

                    &:focus {
                        outline: none;
                        border-color: #aeaeae;
                    }
                }

                > span {
                    font-size: .7rem;
                    color: gray;
                    width: 10rem;
                }
            }

            &[data-setting="orientation"] {
                > fieldset {
                    > #orientation-container {
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        gap: .5rem;
                        
                        > [data-orientation] {
                            cursor: pointer;
                            opacity: .8;
                            transition-duration: var(--td);
                            transition-timing-function: ease;
                            transition-property: opacity, filter, scale;
                        }

                        > [data-orientation="chin-up"]    > img { rotate: 90deg; }
                        > [data-orientation="chin-right"] > img { rotate: 180deg; }
                        > [data-orientation="chin-down"]  > img { rotate: 270deg; }
                        > [data-orientation="chin-left"]  > img { rotate: 0deg; }

                        > [data-sel="false"] {
                            opacity: .7;
                            filter: blur(1px);

                            &:hover {
                                opacity: 1;
                                filter: blur(0);
                            }
                            &:active {
                                opacity: 1;
                                filter: blur(0);
                                scale: .95;
                            }
                        }

                    }
                }
            }

        }
    }

}

dialog#image-dialog {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: auto;
    z-index: 1000000;

    > #image-dialog-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: .5rem;
        border-radius: 1.5rem;
        background-color: var(--bg-clr);

        > img,
        > canvas {
            max-width: 90dvw;
            max-height: 80dvh;
            object-fit: contain;
            border-radius: 1rem;
            user-select: none;
        }

        > #image-dialog-buttons {
            display: flex;
            gap: .5rem;
            margin-bottom: .5rem;

            > button {
                font-size: 1rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: .25rem;
                font-weight: 300;
                box-shadow: none;
                user-select: none;

                &:hover {
                    box-shadow: 0 0px 3px 1px #0f0f0f;
                }

                > img {
                    width: 1.5rem;
                }
            }
        }
    }

    &::backdrop {
        backdrop-filter: blur(3px);
        background-color: rgba(0, 0, 0, .2);
    }
}

@media screen and (max-width: 700px) {
    [data-op-place] {
        > table {
            > tbody,
            > thead {
                > tr {
                    > th,
                    > td {
                        &[data-w="created"],
                        &[data-w="updated"] {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}