@gravity-ui/uikit/build/esm/components/Toaster/Toast/Toast.css

Gravity UI base styling and components

.g-toast {
  --_--item-gap: 10px;
  --_--item-padding: 16px;
  --_--background-color: var(--g-color-base-background);
  display: flex;
  box-sizing: border-box;
  position: relative;
  width: inherit;
  margin-block-end: var(--g-toaster-item-gap, var(--_--item-gap));
  padding: var(--g-toaster-item-padding, var(--_--item-padding));
  font-size: var(--g-text-body-2-font-size);
  border-radius: 8px;
  box-shadow: 0px 0px 15px var(--g-color-sfx-shadow);
  background-color: var(--_--background-color);
  overflow: hidden;
  z-index: 0;
}
.g-toast_mobile {
  width: 100%;
}
.g-toast_theme_normal {
  --_--background-color: var(--g-color-base-float);
}
.g-toast_theme_info {
  --_--container-background-color: var(--g-color-base-info-light);
  --_--icon-color: var(--g-color-text-info-heavy);
}
.g-toast_theme_success {
  --_--container-background-color: var(--g-color-base-positive-light);
  --_--icon-color: var(--g-color-text-positive-heavy);
}
.g-toast_theme_warning {
  --_--container-background-color: var(--g-color-base-warning-light);
  --_--icon-color: var(--g-color-text-warning-heavy);
}
.g-toast_theme_danger {
  --_--container-background-color: var(--g-color-base-danger-light);
  --_--icon-color: var(--g-color-text-danger-heavy);
}
.g-toast_theme_utility {
  --_--container-background-color: var(--g-color-base-utility-light);
  --_--icon-color: var(--g-color-text-utility-heavy);
}
.g-toast__container {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  min-height: var(--g-text-body-2-line-height);
  min-width: 0;
}
.g-toast__container:before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-color: var(--_--container-background-color);
}
.g-toast__icon-container {
  flex: 0 0 auto;
  padding-inline-end: 8px;
  padding-block-start: 2px;
  color: var(--_--icon-color);
  min-width: 0;
}
.g-toast__title {
  font-family: var(--g-text-subheader-font-family);
  font-weight: var(--g-text-subheader-font-weight);
  font-size: var(--g-text-subheader-3-font-size);
  line-height: var(--g-text-subheader-3-line-height);
  margin: 0;
  padding-inline-end: 32px;
}
.g-toast__content {
  margin-block-start: var(--g-spacing-2);
}
.g-toast__content_without-title {
  margin-block-start: 0;
  padding-inline-end: 32px;
}
.g-toast__actions {
  margin-block-start: var(--g-spacing-3);
}
.g-toast__action {
  margin-inline-end: 8px;
}
.g-toast .g-toast__btn-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
}