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

Sense UI components library

@value (borderRadiusXSmall) from '../../styles/variables/_border.css';
@value (colorFillPrimary,
  colorTextPrimary,
  colorNeutralLight,
  colorNeutralLightest,
  colorSuccessLight,
  colorSuccessLightest,
  colorInformationLight,
  colorInformationLightest,
  colorWarningLight,
  colorWarningLightest,
  colorDangerLight,
  colorDangerLightest
) from '../../styles/variables/_color.css';

@value (
  spaceXSmall,
  spaceSmall
) from '../../styles/variables/_space.css';

@value (
  sizeFluid
) from '../../styles/variables/_size.css';

@value (
  borderWidthPrimary
) from '../../styles/variables/_border.css';

.alertContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: spaceXSmall;
  gap: spaceXSmall;
  border-radius: borderRadiusXSmall;
  width: sizeFluid;
  word-break: normal;
  border-width: borderWidthPrimary;
  border-style: solid;
}

.neutral {
  background-color: colorNeutralLightest;
  border-color: colorNeutralLight;
}

.success {
  background-color: colorSuccessLightest;
  border-color: colorSuccessLight;
}

.information {
  background-color: colorInformationLightest;
  border-color: colorInformationLight;
}

.warning {
  background-color: colorWarningLightest;
  border-color: colorWarningLight;
}

.danger {
  background-color: colorDangerLightest;
  border-color: colorDangerLight;
}

.closeIcon {
  margin-left: auto;
}

.actionContainer {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: spaceSmall;
}