'use strict';

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

var styled = require('styled-components');
var index = require('../../../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const Wrapper = styled__default['default'].div `
  min-width: 175px;
  color: ${index.getColorAlias('contentDefault')};
  ${index.getFontSize('size16')};
`;
const IconWrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['disabled']),
}) `
  margin-left: ${index.getSpacing('s02')};
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    width: 16px;
    height: 16px;
    fill: ${(props) => index.getColorAlias(props.disabled ? 'contentDisabled' : 'contentDefault')};
  }
`;
const LeadingIconWrapper = styled__default['default'](IconWrapper) `
  margin-right: ${index.getSpacing('s02')};
  margin-left: unset;
`;
const ChipBorder = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['hasError']),
}) `
  border-radius: ${(props) => props.theme.radius.roundedD};

  ${({ hasError }) => hasError &&
    styled.css `
      outline: 1px solid ${index.getColorAlias('contentError')};
    `}

  &:focus,
  &:focus-within {
    outline: 2px solid ${index.getColorAlias('focusOuter')};
  }
`;

exports.ChipBorder = ChipBorder;
exports.IconWrapper = IconWrapper;
exports.LeadingIconWrapper = LeadingIconWrapper;
exports.Wrapper = Wrapper;
