import styled, { css } from 'styled-components';
import { getColorAlias, getFontSize, convertToTransientProps, getSpacing } from '../../../../utils/index.js';

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

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

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

export { ChipBorder, IconWrapper, LeadingIconWrapper, Wrapper };
