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

Sense UI components library

@value (spaceNone,spaceXXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';

@value (size24, size400) from '../../styles/variables/_size.css';

@value (colorBorderPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';

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

.toastContainer {
  composes: boxShadow1 from '../../styles/shadow.module.css';
  composes: borderPrimary from '../../styles/border.module.css';
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: spaceMedium;
  gap: spaceSmall;
  width: size400;
  min-width: size400;
  border-radius: borderRadiusMedium;
  background: colorBackgroundTertiary;
}

.toastMidSection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: spaceNone;
  gap: spaceMedium;
}

.contentWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: spaceXXSmall;
  gap: spaceSmall;
}

.titleBodyWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: spaceNone;
  gap: spaceXXSmall;
}

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

.toastFooterActions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: spaceSmall;
}

.closeIcon {
  margin-left: auto;
}

.toastTitle {
  composes: subTitleSmall from '../../styles/typography.module.css';
}