.container {
    list-style: none;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 48px);
    gap: 2px;

    padding: 0.2em 0;
}

.color {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    &:nth-child(1) {
        border-top-left-radius: 3px;
    }

    &:nth-child(3) {
        border-top-right-radius: 3px;
    }

    &:nth-child(13) {
        border-bottom-left-radius: 3px;
    }

    &:nth-child(15) {
        border-bottom-right-radius: 3px;
    }

    &[data-active="false"] {
        cursor: pointer;
    }

    label {
        pointer-events: none;
    }

    input {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        background: none;
        border: 0;
        outline: 0;

        display: inline;
        font-family: var(--monospace);
        width: 7ch;
    }

    :global(.react-colorful) {
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translate(-50%, -100%);

        z-index: 1;

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
    }
}
