.palette {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 calc(50% - 0.375rem);
    scroll-snap-align: start;
}

.swatch {
    width: 75%;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    background: linear-gradient(
        to bottom,
        rgba(var(--priUser), 1) 0%,
        rgba(var(--priUser), 1) 33%,
        rgba(var(--secUser), 1) 33%,
        rgba(var(--secUser), 1) 66%,
        rgba(var(--quiUser), 1) 66%,
        rgba(var(--quiUser), 1) 100%
    );
    border: 0.15rem solid rgba(var(--secUser), 0.5);

    &.active {
        border: 0.2rem solid rgba(var(--ninUser), 1);
        box-shadow: 0 0 0.5rem rgba(var(--ninUser), 0.5);
    }

    &.locked {
        opacity: 0.5;
        filter: saturate(0.4);
    }
}