.popup-createPalette {
    display: grid;
    grid-template-columns: 40% 60%;
}

.createPalette-colorArea {
    border-right: 2px solid var(--artimus-background-2);
    
    overflow: scroll;

    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
}

.createPalette-addColor {
    align-self: center;

    display: block;

    width: auto;
    height: 1.5em;
    aspect-ratio: 1;

    padding: 0px;
    
    color: var(--artimus-text);

    border-color: var(--artimus-background-3);
    border-style: solid;
    border-radius: 8px;
    border-width: 2px;

    transition: 300ms background-color, 300ms border-color;
}

.createPalette-addColor:checked { border-color: var(--artimus-text); }
.createPalette-addColorpicker:hover { border-color: var(--artimus-button-hover); }
.createPalette-addColor:hover:checked { border-color: var(--artimus-button-selected); }

.createPalette-bottomArea {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-content: center;
}

.createPalette-detailArea {
    display: grid;
    grid-template-columns: 40% 60%;
    justify-content: center;
    align-content: center;
}

@media screen and (min-height: 100vw) {
    .popup-createPalette {
        display: grid;
        grid-template-rows: 40% 60%;
        grid-template-columns: none;
    }

    .createPalette-colorArea {
        border-bottom: 2px solid var(--artimus-background-2);
        border-right: none;
    }
}