@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,
  colorFocusPrimary,
  colorFocusInformation,
  colorInformation,
  colorFillPrimary,
  colorTextClickable,
  colorNeutralLightest,
  colorBackgroundTertiary,
  colorFillSecondary,
  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, colorFocusPrimary, colorFocusInformation);
  background-clip: content-box, border-box;
  background-origin: border-box;

  &:hover {
    background-image: linear-gradient(
        colorFillSecondary,
        colorInformationLightest
      ),
      linear-gradient(to right, colorFillPrimary, colorInformation);
  }
}

.secondary {
  background-color: colorNeutralLightest;
}

/* ---- Grid Layout for Content ---- */
.promptChipContainer {
  display: grid;
  width: spaceFluid;
  gap: spaceSmall;
  padding: spaceXSmall;
  padding-left: spaceSmall;
  align-items: center;
  border-radius: borderRadiusMedium;

  .chipIconDefaultColor {
    color: colorDataViz2;
  }

  /* 
    NORMAL MODE (when isMultiline={false}):
    - single row, 3 columns: icon | children | right
  */
  &:not(.multilinePromptChipContainer) {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'leftSection childrenWrapper rightSection';
  }

  /*
    MULTILINE MODE (when isMultiline={true}):
    - 2 rows: first row for icon (leftSection) and actions (rightSection)
    - children on second row spanning full width
  */
  &.multilinePromptChipContainer {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'leftSection . rightSection'
      'childrenWrapper childrenWrapper childrenWrapper';
  }

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

    .chipIconDefaultColor {
      color: colorTextClickable;
    }
  }
}

.leftSection {
  grid-area: leftSection;
  display: flex;
  gap: spaceSmall;
  align-items: center;
}

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

.rightSection {
  grid-area: rightSection;
  display: flex;
  gap: spaceSmall;
  align-items: center;
}