"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const view_container_1 = require("view-container");
const Button_1 = require("atoms/Button");
const ToggleList_1 = require("molecules/ToggleList");
const StyledSwatchesButton = view_container_1.styled.withComponent(Button_1.Button).qa('qa-facet') `
  outline: none;
  width: auto;
  min-height: rem(48);
  height: rem(48);
  padding: 0 rem(14);
  margin: 0 $spacing $spacing 0;

  /* @todo don't use border */
  /* transition: border 0.24s ease-in-out; */
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #a6afc1;
  color: #2C2C2C;
  font-weight: 500;

  ${props => props.isSelected &&
    view_container_1.styled.css `
      border-width: 4px;
      border-color: $colors-actionblue;
    `};

  ${props => props.isDisabled &&
    view_container_1.styled.css `
      opacity: 0.4;
      color: #a6afc1;

      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 = view_container_1.styled.div `
  display: flex;
  flex-direction: column;

  ${ToggleList_1.ToggleContentWrapper} {
    flex-wrap: wrap;
  }
`;
exports.SwatchWrapper = SwatchWrapper;
//# sourceMappingURL=styled.js.map