"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const Button_1 = require("../../atoms/Button");

const ToggleList_1 = require("../../molecules/ToggleList");

const StyledSwatchesButton = styleh_components_1.styled.withComponent(Button_1.Button)`outline:none;width:auto;min-height:3rem;height:3rem;padding:0 0.875rem;margin:0 1rem 1rem 0;box-sizing:border-box;background-color:transparent;border:1px solid var(--color-light-grey);color:var(--color-black);font-weight:500;${props => props.isSelected && styleh_components_1.styled.css`border-width:4px;border-color:var(--color-blue);`};${props => props.isDisabled && styleh_components_1.styled.css`opacity:0.4;color:var(--color-light-grey);pointer-events:all;&:hover{cursor:not-allowed;}&:active{pointer-events:none;}`};${Button_1.ButtonLabel}{color:inherit;text-transform:capitalize;margin:0;font-weight:500;}`;
exports.StyledSwatchesButton = StyledSwatchesButton;
const SwatchWrapper = styleh_components_1.styled.div`display:flex;flex-direction:column;${ToggleList_1.ToggleContentWrapper}{flex-wrap:wrap;}`;
exports.SwatchWrapper = SwatchWrapper; //# sourceMappingURL=styled.js.map