:root {
    --gridItemSize: 40px;
    /* --containerSize: 15rem; */
    --border-radius: 0.25rem;

    --padding-small: 0.25rem;
    --padding-medium: 0.5rem;
    --padding-large: 1rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* clever way to check css nesting support and warn the user */
.nesting-test {
    .nested {
        display: none;
    }
}
.nested {
    display: block;
    padding: var(--padding-medium);
}
.nested div {
    padding: var(--padding-medium);
    max-width: min(70%, 50rem);
    font-size: large;
    background-color: rgba(255, 0, 0, 0.3);
    border: none;
    outline: 2px solid rgba(255, 0, 0, 0.6);
    border-radius: var(--border-radius);
}
.nested button {
    font-size: large;
    padding: var(--padding-medium);
}

main {
    margin: 0.5rem auto;
    display: grid;
    grid-template-columns: min-content 15rem;
    grid-template-rows: min-content min-content;
    grid-template-areas:
        "canvas options"
        "words words";
    gap: 0.5rem;
    width: min-content;
}

.canvas {
    grid-area: canvas;
}

.options {
    grid-area: options;

    > .container:not(:last-child) {
        margin-bottom: 0.5rem;
    }
}

.option {
    display: flex;

    > label, > input, > select {
        width: 50%;
    }

    > input, > select, > table {
        margin: auto;
    }
}

input[type="checkbox"] {
    height: 18px;
    width: 18px;
}

input:invalid {
    background-color: #FFCCCC; /* You can choose any color or styling */
}

.words {
    grid-area: words;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}
#wordslist.words-list {
    flex-direction: row; 
    flex-wrap: wrap;
}

#gptsuggestedwords {
    max-height: 22rem;
    display: flex;
    flex-direction: column; 
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-y: auto;
}

.outline {
    border: none;
    outline: 1px solid black;
    border-radius: var(--border-radius);
}

.container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    
    > .container-header {
        padding: var(--padding-small) var(--padding-large);
        font-size: large;
        height: 1.75rem;
        margin-bottom: 0;
        text-align: center;
        background-color: rgba(128, 128, 128, 0.5);
        flex-grow: 0;
    }
    
    > .container-body {
        padding: var(--padding-small);
        display: inherit;
        flex-direction: inherit;
        gap: inherit;
        flex-grow: 1;
    }
    
    > .container-footer {
        padding: var(--padding-small);
        display: flex;
        flex-direction: row;
        gap: inherit;
        flex-grow: 0;

        > * {
            flex-grow: 1;
        }
    }
}

dialog.container {
    margin: auto;

    &:not([open]) {
        display: none;
    }
}

#importlistmodal {
    & #importlistinput {
        flex-grow: 2;

        &:focus {
            /* outline: 1px solid orange; */
            outline: unset;
        }
    }
}

.h-flex {
    display: flex;
    gap: 5px;

    > * {
        flex-grow: 1;
    }

    &.full {
        width: 100%;
    }

    &.wrap {
        flex-wrap: wrap;
    }
}

.v-flex {
    display: flex;
    flex-direction: column;
    gap: 5px;

    &.full {
        height: 100%;
    }

    &.wrap {
        flex-wrap: wrap;
    }
}

#loadingHolder {
    visibility: hidden;
    z-index: 10;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(100,100,100, 0.5);
}

#loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: x-large;
    background-color: rgba(200,200,200, 0.8);
    border-radius: var(--border-radius);
    padding: var(--padding-large);
}

#loading > img {
    max-height: 200px;

}