.palette-picker {
    display: flex;
    gap: 1rem;
}

.palette-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.swatch {
    width: 4rem;
    height: 4rem;
    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(--terUser), 1) 66%,
        rgba(var(--terUser), 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);
    }
}