body {
    height: 100vh;
    display: grid;
    place-items: center;
    margin: 0px;
    padding: 0px;
}

.sw-tier-list {

    /* Set base color externally to update theme */
    --color: rebeccapurple;
    --gap: .2em;
    --squareSize: 5em;

    width: min(750px, 100vw);
    display: grid;
    gap: 1em;
    padding: 3em;
    background-color: var(--white);
    box-shadow: var(--boxShadow);

    main {
        display: grid;
        gap: 1em;

        .drag {
            filter: drop-shadow(0px 0px .5rem var(--black));
            z-index: 1;
        }

        >div {
            /* Tier row */
            display: flex;
            flex-flow: row nowrap;
            gap: var(--gap);
            min-height: var(--squareSize);
            background-color: var(--white);


            >.drop {
                /* Drop container */
                flex-grow: 1;
                display: flex;
                flex-flow: row wrap;
                padding: 0px var(--gap);
                gap: var(--gap);
                outline: var(--border);
                outline-offset: -1px;

                /* width: calc(calc(var(--gap)*6) + calc(var(--squareSize)*6)); */

                &:has(.placeholder) {
                    background-color: var(--color100);
                }

                /* .placeholder {
                    transition: width .3s ease;
                } */

            }

            >button {
                height: var(--squareSize);
                width: var(--squareSize);
            }
        }
    }

    header {
        min-height: calc(var(--squareSize) / 2);
        display: flex;
        flex-flow: row nowrap;
        justify-content: end;
        gap: .7em;

        button {
            min-width: 2.5em;
        }

    }

    footer {
        display: grid;
        gap: .7em;
        min-height: var(--squareSize);

        >.unused-items {
            /* Unused row */
            display: flex;
            flex-flow: row wrap;
            gap: var(--gap);
            min-height: var(--squareSize);
        }

        button {
            justify-self: end;
        }

    }

    .item {
        height: var(--squareSize);
        width: var(--squareSize);
        display: grid;
        position: relative;
        overflow: hidden;


        >img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: auto;
            object-fit: cover;
            user-select: none;
        }

        >div {
            background-color: var(--white);
            opacity: .7;
            word-break: break-word;
            overflow: hidden;
            max-height: 100%;
            font-size: .8em;
            padding: .2em
        }

        &.preview {
            --squareSize: 10em;
        }
    }

    dialog {
        padding: 2em;
        width: 25em;
        height: 35em;

        .input-wrapper {
            display: grid;
            gap: .3em;
        }

        form {
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
        }

        .form-content {
            flex: 1;
            display: grid;
            place-items: center;

            &.form-content-item {

                img {
                    height: 12em;
                    width: auto;
                    box-shadow: var(--boxShadow);

                    &[src=""] {
                        display: none;
                    }
                }

            }
        }

        .button-row {
            display: flex;
            flex-flow: row nowrap;
            gap: .5em;
            justify-content: end;
        }

    }

}