@value (
  colorNeutralLightest,
  colorNeutralLight,
  colorInformationLightest,
  colorInformationLight,
  colorSuccessLightest,
  colorSuccessLight,
  colorWarningLightest,
  colorWarningLight,
  colorDangerLightest,
  colorDangerLight,
  colorGrayLightest,
  colorFillNone,
  colorTextDisabled,
  colorFillDisabled
) from '../../styles/variables/_color.css';
@value (
  spaceNone,
  spaceXXSmall,
  spaceXSmall,
  spaceSmall
) from '../../styles/variables/_space.css';
@value (
  borderRadiusXSmall
) from '../../styles/variables/_border.css';
@value (
  size18,
  size26
) from '../../styles/variables/_size.css';

.chipWrapper {
  composes: formLabelSmall from '../../styles/typography.module.css';
  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
  display: flex;
  background-color: colorNeutralLightest;
  align-items: center;
  max-width: fit-content;
  max-height: fit-content;
  gap: spaceXXSmall;
  border-radius: borderRadiusXSmall;
  cursor: pointer;
}

.medium {
  height: size26;
  padding: spaceNone spaceSmall;
}

.small {
  padding: spaceNone spaceXSmall;
  height: size18;
}

.primary {
  background-color: colorNeutralLightest;
}

.primary:hover {
  background-color: colorNeutralLight;
}

.information {
  background-color: colorInformationLightest;
}

.information:hover {
  background-color: colorInformationLight;
}

.success {
  background-color: colorSuccessLightest;
}

.success:hover {
  background-color: colorSuccessLight;
}

.warning {
  background-color: colorWarningLightest;
}

.warning:hover {
  background-color: colorWarningLight;
}

.danger {
  background-color: colorDangerLightest;
}

.danger:hover {
  background-color: colorDangerLight;
}

.secondary {
  composes: borderPrimary from '../../styles/border.module.css';
  background-color: colorFillNone;
}

.secondary:hover {
  background-color: colorGrayLightest;
}

.withIcon {
  padding: spaceNone spaceSmall spaceNone spaceXSmall;
}

.dismissable {
  padding: spaceNone spaceXSmall spaceNone spaceSmall;
}

.dismissIcon {
  margin-left: spaceXSmall;
  cursor: pointer;
}

/* This should be last section for CSS Specificity  */

.disabled {
  color: colorTextDisabled;
  background-color: colorFillDisabled;
  border: initial;
  pointer-events: none;
  cursor: not-allowed;
}

.disabled .dismissIcon {
  color: colorTextDisabled;
}

.disabled .chipIcon {
  color: colorTextDisabled;
}