import styled, { css } from 'styled-components';
import { Flexbox } from '../..';
var variantStyles = function variantStyles(theme, variant, $selected) {
  return {
    default: css(["", ""], $selected && "\n      color: ".concat(theme.colorTokens.action.text_default, ";\n      background: ").concat(theme.colorTokens.action.background_weak, ";\n      &:hover {\n        color: ").concat(theme.colorTokens.action.text_hover, ";\n      }\n      &:focus-visible {\n        outline: 1px solid ").concat(theme.colorTokens.action.border_default, ";\n      }\n      ")),
    sustainability: css(["&:hover{color:", ";}", ""], theme.colorTokens.positive.text_hover, $selected && "\n      color: ".concat(theme.colorTokens.positive.text_default, ";\n      background: ").concat(theme.colorTokens.positive.background_weak, ";\n      &:focus-visible {\n        outline: 1px solid ").concat(theme.colorTokens.positive.border_default, ";\n      }\n      ")),
    brand: css(["", ""], $selected && "\n      color: ".concat(theme.colorTokens.neutral.text_strong, ";\n      background: ").concat(theme.colorTokens.neutral.background_brand_black, ";\n      &:focus-visible {\n        outline: 1px solid ").concat(theme.colorTokens.action.border_default, ";\n      }\n      &:hover {\n        color: ").concat(theme.colorTokens.action.text_default, ";\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.colorTokens.neutral.text_default;
}, function (p) {
  return p.theme.colorTokens.neutral.background_medium;
}, function (p) {
  return p.theme.colorTokens.action.text_hover;
}, function (p) {
  return p.theme.colorTokens.neutral.border_focus;
}, 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.colorTokens.neutral.background_disabled, ";\n      color: ").concat(p.theme.colorTokens.neutral.text_disabled, ";\n      cursor: not-allowed;\n      &:focus-visible {\n        outline: none;\n      }\n      &:hover {\n        color: ").concat(p.theme.colorTokens.neutral.text_disabled, ";\n      }\n    ");
});
export var StyledFlexbox = styled(Flexbox).withConfig({
  displayName: "FilterChipstyled__StyledFlexbox",
  componentId: "sc-al5q42-1"
})(["& > *{color:inherit;}"]);