:root {
    --object-gallery-dimension: 13em;
}

object-gallery,file-gallery,foreign-id,file-id {
    display: flex;
    flex-wrap: wrap;
    --gap: var(--margin-s);
    gap: var(--gap);
    padding: var(--gap);
    --object-gallery-dimension: 13em;
    --drop-shadow-size: calc(var(--gap) / 2);
    --drop-target-shadow: calc(var(--drop-shadow-size) * -1) 0 0 var(--primary-color-1);
    .object-picker-container {
        display: flex;
        flex-direction: column;
        object-picker,
        label.button {
            display: block;
            height: var(--object-gallery-dimension);
            width: var(--object-gallery-dimension);
            cursor: pointer;
        }

        label.button {
            text-align: center;
            font-weight: normal;
            border-radius: var(--input-element-radius);
            padding: var(--input-element-padding);
        }

        input[type='file'] {
            /* height: 0px;
            width: 0px;
            border: 0px !important; */
            background: transparent;
            display: inline-block;
            /* margin: 0px; */
            /* padding: 0px; */
        }

        &:has(object-picker, label.button) {
            object-picker, label.button {
                height: 50%;
            }
        }
    }
    drop-indicator {
        display: none;
        height: var(--object-gallery-dimension);
        width: 0;
        margin: calc((var(--gap) * 0.4) * -1);
        box-shadow: 1px 1px 1px 1px var(--primary-color-1);
        [orientation="list"] {
            height: 0;
            width: var(--object-gallery-dimension);
        }
    }
    &[drag-in-progress="true"] {
        cursor: grabbing;
        img, video {
            
        }
        drop-indicator {
            display: block;
        }
        &[orientation="list"] {
            --drop-target-shadow: 0 calc(var(--drop-shadow-size) * -1) 0 var(--primary-color-1);
            .drop-target--class {
                &.drop-target--next {
                    /* --drop-target-shadow: 0 var(--drop-shadow-size) 0 var(--primary-color-1); */
                }
            }
        }
        .drop-target--class {
            box-shadow: var(--drop-target-shadow);
            &.drop-target--next {
                /* --drop-target-shadow: var(--drop-shadow-size) 0 0 var(--primary-color-1); */
            }
        }
    }
}

foreign-id, file-id {
    :is(gallery-item) {
        & + .object-picker-container {
            display: none;
        }
    }
}

object-picker {
    display: grid;
    place-content: center;
    text-align: center;
}

gallery-item {
    display: block;
    position: relative;
    height: var(--object-gallery-dimension);
    width: var(--object-gallery-dimension);
    border: 1px solid var(--neutral-color-1);
    padding: var(--margin-xs);
    img, video {
        display: block;
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;
        user-select: none;
    }
    > button, > action-menu[role='button'] {
        float: right;
        position: absolute;
        right: 5px;
        --stroke-size: 2px;
        background: var(--input-element-background);
        border: var(--input-element-border-value);
        font-size: 0.7em;
        margin: var(--margin-xs);
        color: black;
        text-stroke: var(--stroke-size) solid white;
        -webkit-text-stroke: var(--stroke-size) solid white;
        text-shadow: calc(var(--stroke-size) *  1) calc(var(--stroke-size) *  1) white,
                     calc(var(--stroke-size) *  1) calc(var(--stroke-size) * -1) white,
                     calc(var(--stroke-size) * -1) calc(var(--stroke-size) *  1) white,
                     calc(var(--stroke-size) * -1) calc(var(--stroke-size) * -1) white;
        &:hover {
            border-color: var(--primary-color-0);
        }
    }
    /* If we have a mime-type, then we're a file rather than an object */
    &[mime-type] > button {
        position: absolute;
    }
    action-menu[role='button'] {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: unset;
        padding: unset;
        border: none;
        &:hover {
            color: black;
        }
        &:before {
            content: "\F01D9"
        }
    }
    &.object-gallery--visually-hidden {
        opacity: 0.2;
    }
}

.object-gallery--visual-drop-target {
    position: fixed;
    pointer-events: none;
    cursor: grabbing;
}

/* file-gallery gallery-item {

} */

.object-gallery--selection-window {
    max-height: 60vh;
    overflow-y: scroll;
    scrollbar-width: small;
    text-align: center;
    /* width: fit-content; */
}

.object-gallery--item-selection {
    transition: background-color .3s, color .3s;
    display: inline-block;
    position: relative;
    width: 12em;
    height: 12em;
    isolation: isolate;
    margin: var(--margin-xs);
    vertical-align: top;
    & > input[type="checkbox"] {
        position:absolute;
        top: var(--margin-xs);
        left: var(--margin-xs);
        height: 1em;
        width: 1em;
        z-index: 100;
        /* background: rgb(255 255 255 / .2); */
    }
    gallery-item {
        display: inline-block;
        height: 100%;
        width: 100%;
    }
    h2 {
        font-size: 1.1em;
        margin-bottom: 0;
    }
    h2, code, span, small {
        white-space: normal;
        display: block;
        word-break: break-all;
        text-align: left;
    }
    &:has(:checked) {
        /* background-color: var(--primary-color-1);
        color: var(--primary-color-1-fg); */
        box-shadow: 0 0 0rem 4px var(--input-element-active);
    }
    a, action-menu, button {
        display: none;
    }
}

.object-gallery--meta-editor {
    border: 1px solid var(--input-disabled-border);
    border-radius: var(--margin-s);
    padding: 0;
    ul.list-panel {
        border: unset;
    }
    button {
        width: 50%;
        border: 1px solid transparent;
        border-top: 1.5px solid var(--input-disabled-border);
        border-radius: unset;
        &[type='submit'] {
            background: var(--project-color-acknowledge);
            &:hover {
                background: hsl(from var(--project-color-acknowledge) h s calc(l * 1.4))
            }
        }
        &:hover {
            border: 1.5px solid transparent;
        }
    }
}