/* TODO @TW: review. This relies on custom prop to set color from JSX "style" prop. */
.root {
    --venia-swatch-bg: var(--venia-global-color-gray-100);

    composes: root from './tile.module.css';

    @apply border-shaded-10;
    composes: text-white from global;
    composes: w-[3rem] from global;
    background: var(--venia-swatch-bg);
}

/* TODO @TW: review. This relies on custom prop to set color from JSX "style" prop. */
.root_selected {
    composes: root;

    background: linear-gradient(-45deg, rgba(0, 0, 0, 0.2), transparent),
        var(--venia-swatch-bg);
}

.root_focused {
    composes: root;
}

.root_selected_focused {
    composes: root_selected;
}

.checked {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 256ms;
}

.unchecked {
    composes: checked;
    opacity: 0;
}

.root_outOfStock,
.root_selected_outOfStock {
    composes: root;
    composes: opacity-40 from global;
    composes: border-2 from global;
    composes: border-solid from global;
    @apply border-gray-400;

    composes: after_absolute from global;
    composes: after_border-t-2 from global;
    composes: after_border-solid from global;
    composes: after_border-swatch from global;
    composes: after_w-swatch from global;
    composes: after_-rotate-45 from global;
}