@spaced-out/ui-design-system/lib/components/PromptChip/PromptChip.module.css

Sense UI components library

@value (
    spaceSmall,
    spaceXSmall,
    spaceFluid
) from '../../styles/variables/_space.css';
@value (
    colorDataViz2,
    colorFillPrimary,
    colorInformation,
    colorFocusPrimary,
    colorFillSecondary,
    colorTextClickable,
    colorNeutralLightest,
    colorBackgroundTertiary,
    colorInformationLightest
 ) from '../../styles/variables/_color.css';
@value (
    borderWidthNone,  
    borderRadiusMedium,
    borderWidthPrimary,
    borderWidthTertiary
 ) from '../../styles/variables/_border.css';
@value (
    opacity0,
    opacity100
 ) from '../../styles/variables/_opacity.css';

.promptChipWrapper {
  composes: boxShadow2 from '../../styles/shadow.module.css';
  display: flex;
  border-radius: borderRadiusMedium;
  outline: none;
  width: spaceFluid;

  &:focus {
    box-shadow: borderWidthNone borderWidthNone borderWidthNone
      borderWidthTertiary colorFocusPrimary;
  }
}

.primary {
  border: borderWidthPrimary solid transparent;
  background-image: linear-gradient(
      colorBackgroundTertiary,
      colorBackgroundTertiary
    ),
    linear-gradient(to right, colorFillPrimary, colorInformation);
  background-clip: content-box, border-box;
  background-origin: border-box;
}

.secondary {
  background-color: colorNeutralLightest;
}

.promptChipContainer {
  display: flex;
  width: spaceFluid;
  gap: spaceSmall;
  padding: spaceXSmall;
  padding-left: spaceSmall;
  align-items: center;
  border-radius: borderRadiusMedium;
  justify-content: space-between;

  & .chipIconDefaultColor {
    color: colorDataViz2;
  }
}

.promptChipContainerHover:hover {
  background-image: linear-gradient(
    to right,
    colorFillSecondary,
    colorInformationLightest
  );
  cursor: pointer;

  & .chipIconDefaultColor {
    color: colorTextClickable;
  }
}

.leftSection,
.rightSection {
  display: flex;
  gap: spaceSmall;
  align-items: center;
}

.childrenWrapper {
  composes: bodyMedium from '../../styles/typography.module.css';
}