ui-color-swatch {
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
    flex: 1;
    & .transparent {
        background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
        background-size: 50% 50%; /* Change to appropriate size */
        background-position: 0 0, 50% 50%; /* Change to appropriate position */
    }
    & .mixed {
        background: linear-gradient(to bottom right, black 50%, white 50%);
        background-size: initial;
        background-position: initial;
    }
    & .selected {
        border: 2px solid var(--fermat-color-accent500) !important;
    }
}

ui-color-swatch div.swatch {
    flex: 1;
    width: 100%;
    min-width: 20px;
    border: 2px solid var(--fermat-color-neutral300);
}

ui-color-swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}