import styled, { css } from 'styled-components';
import { Flexbox } from '../..';
var variantStyles = function variantStyles(theme, variant, $selected) {
  return {
    default: css(["", ""], $selected && "\n      color: ".concat(theme.color.quickFilterSelectedText, ";\n      background: ").concat(theme.color.quickFilterSelectedBackground, ";\n      &:focus-visible {\n        outline: 1px solid ").concat(theme.color.quickFilterFocusSelectedOutline, ";\n      }\n      ")),
    sustainability: css(["&:hover{color:", ";}", ""], theme.color.quickFilterSustainabilityHoverColor, $selected && "\n      color: ".concat(theme.color.quickFilterSustainabilityColor, ";\n      background: ").concat(theme.color.quickFilterSustainabilityBackground, ";\n      &:focus-visible {\n        outline: 1px solid ").concat(theme.color.quickFilterSustainabilityColor, ";\n      }\n      ")),
    brand: css(["", ""], $selected && "\n      color: ".concat(theme.color.quickFilterBrandActiveColor, ";\n      background: ").concat(theme.color.quickFilterBrandActiveBackground, ";\n      &:focus-visible {\n        outline: 1px solid ").concat(theme.color.quickFilterBrandFocusBorder, ";\n      }\n      &:hover {\n        color: ").concat(theme.color.quickFilterBrandHoverColor, ";\n      }\n      "))
  }[variant];
};
export var ContainerLabel = styled.label.withConfig({
  displayName: "FilterChipstyled__ContainerLabel",
  componentId: "sc-al5q42-0"
})(["border-radius:50%;box-sizing:border-box;display:inline-flex;align-items:center;cursor:pointer;padding:", "px;height:", "px;color:", ";background:", ";outline-offset:-1px;&:hover{color:", ";}&:focus-visible{outline:1px solid ", ";}transition:color 222ms,background 222ms,outline 222ms;", " ", " ", ";"], function (p) {
  return p.theme.spacing.unit(2);
}, function (p) {
  return p.theme.spacing.unit(8);
}, function (p) {
  return p.theme.color.quickFilterText;
}, function (p) {
  return p.theme.color.quickFilterBackground;
}, function (p) {
  return p.theme.color.quickFilterSelectedText;
}, function (p) {
  return p.theme.color.quickFilterFocusOutline;
}, function (_ref) {
  var theme = _ref.theme,
    variant = _ref.variant,
    $selected = _ref.$selected;
  return variantStyles(theme, variant, $selected);
}, function (_ref2) {
  var hasLabel = _ref2.hasLabel,
    theme = _ref2.theme;
  return hasLabel && "\n    border-radius: ".concat(theme.spacing.unit(4), "px;\n    ").concat(theme.media.greaterThan(theme.breakpoints.md), " {\n      padding: 0 ").concat(theme.spacing.unit(3), "px;\n      height: ").concat(theme.spacing.unit(6), "px;\n    }\n    ").concat(theme.media.lessThan(theme.breakpoints.md), " {\n      padding: ").concat(theme.spacing.unit(1), "px ").concat(theme.spacing.unit(3), "px;\n    }\n  ");
}, function (p) {
  return p.$disabled && "\n      background: ".concat(p.theme.color.disabledBackground, ";\n      color: ").concat(p.theme.color.disabledText, ";\n      cursor: not-allowed;\n      &:focus-visible {\n        outline: none;\n      }\n      &:hover {\n        color: ").concat(p.theme.color.disabledText, ";\n      }\n    ");
});
export var StyledFlexbox = styled(Flexbox).withConfig({
  displayName: "FilterChipstyled__StyledFlexbox",
  componentId: "sc-al5q42-1"
})(["& > *{color:inherit;}"]);