@use 'base.scss';

#uploadPanel {
    .hide {
        display: none;
    }

    #dragText {
        user-select: none;
    }
}

.canvas-container {
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-width: 50vh;
    min-height: 30vh;
    position: relative;
    box-shadow: 0 0 4px #0009;
    box-sizing: border-box;
    transition-duration: 0.1s;
    outline: 2px dashed transparent;
    outline-offset: 4px;

    &.drag {
        outline-color: white;
        outline-offset: 0;
        background-color: #aaa5;
        filter: contrast(0.5) brightness(1.5);
    }

    > *:not(img) {
        position: absolute;
    }
}

.crop-container {
    background-color: transparent;
    position: absolute;
    --resizer-size: 16px;
    --inset-size: 6px;
    --inset: -10px;
    --corner-size: calc(var(--resizer-size) + 10px);
    z-index: 2;
    cursor: move;
    // box-shadow: 0px 0px 8px #fffa;
    outline: 1px solid #fffa;

    > * {
        background-color: transparent;
        position: absolute;
        width: var(--resizer-size);
        height: var(--resizer-size);
        box-sizing: border-box;
    }
    
    > .width {
        left: var(--inset-size);
        right: var(--inset-size);
        width: auto;
    }
    > .height {
        top: var(--inset-size);
        bottom: var(--inset-size);
        height: auto;
    }
    > .corner {
        width: var(--corner-size);
        height: var(--corner-size);
        border: 2px solid #fff6;
        border-radius: 50%;
        box-shadow: 0 0 4px #000a;
        transition-duration: 0.2s;
    }

    > .top { top: var(--inset); }
    > .right { right: var(--inset); }
    > .bottom { bottom: var(--inset); }
    > .left { left: var(--inset); }

    &:active, &:not(:hover) {
        > .corner:not(:active) {
            border-color: #fff0;
            box-shadow: 0 0 10px #0000;
        }
    }
}

#storageWarning {
    transition: opacity 0.2s 1s;
}

#contextMenu {
    display: flex;
    flex-direction: column;
    padding: 4px;
    transition: transform 0.05s, opacity 0.05s;

    > button {
        background-color: var(--color-background);
        border-radius: 0%;

        &:hover { background-color: var(--color-header); }
        &:active { background-color: var(--color-button-active); }
    }
}

#assetPanel {
    align-items: center;
    padding-top: 16px;
}

#assetGrid {
    display: grid;
    grid-template-columns: repeat(8, max-content);
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 316px;
    background-color: var(--color-background);
    border: 4px solid var(--color-background);
    padding-right: 4px;
    gap: 4px;

    > div {
        @extend %responsive;
        cursor: pointer;
        width: 96px;
        height: 96px;
        background-color: var(--color-not-intense);
        background-size: cover;

        &:hover { background-color: var(--color-button-hover); }
        &:active { background-color: var(--color-button-active); }
    }
}

@media screen and (max-width: 800px) {
    #assetGrid {
        grid-template-columns: repeat(5, max-content);
    }
}