@ozen-ui/kit/__inner__/cjs/components/Alert/Alert.css

React component library

/* stylelint-disable */
.Alert {
  --alert-status-line-width: 8px;
  --alert-status-line-gutter: var(--control-padding-xs);
  --alert-title-text-color: var(--color-content-primary);
  --alert-body-text-color: var(--color-content-secondary);
  --alert-icon-color: var(--color-content-primary);
  --alert-close-button-color: var(--color-content-primary);
  display: flex;
  overflow: auto;
  inline-size: 100%;
  position: relative;
  box-sizing: border-box;
  align-items: flex-start;
  -moz-column-gap: var(--spacing-2xs);
       column-gap: var(--spacing-2xs);
  padding: var(--control-padding-s);
  padding-inline-start: calc(
    var(--control-padding-s) + var(--alert-status-line-width) +
      var(--alert-status-line-gutter)
  );

  font: var(--typography-text-xs-font);

  letter-spacing: var(--typography-text-xs-letter_spacing, 0);

  text-transform: var(--typography-text-xs-text_transform, none);
}
.Alert_color_dark,
  .Alert_inverse {
    --alert-title-text-color: var(--color-content-primary-inverse);
    --alert-body-text-color: var(--color-content-primary-inverse);
    --alert-icon-color: var(--color-content-primary-inverse);
    --alert-close-button-color: var(--color-content-primary-inverse);
  }
.Alert_status_info {
      --alert-icon-color: var(--color-content-info);
      --alert-status-line-color: var(--color-background-info);
    }
.Alert_status_warning {
      --alert-icon-color: var(--color-content-warning);
      --alert-status-line-color: var(--color-background-warning);
    }
.Alert_status_success {
      --alert-icon-color: var(--color-content-success);
      --alert-status-line-color: var(--color-background-success);
    }
.Alert_status_error {
      --alert-icon-color: var(--color-content-error);
      --alert-status-line-color: var(--color-background-error);
    }
.Alert_hasCloseButton {
    padding-inline-end: 40px;
  }
.Alert-Icon {
    display: flex;
    padding-block-start: 2px;
    color: var(--alert-icon-color);
  }
.Alert-Title {
    display: flex;
    align-items: center;
    color: var(--alert-title-text-color);

    font: var(--typography-text-s_1-font);

    letter-spacing: var(--typography-text-s_1-letter_spacing, 0);

    text-transform: var(--typography-text-s_1-text_transform, none);
  }
.Alert-Body {
    color: var(--alert-body-text-color);
    margin-block-start: var(--spacing-3xs);
  }
.Alert-Action {
    margin-block-start: var(--spacing-2xs);
  }
.Alert::after {
  content: '';
  inset: 0;
  position: absolute;
  margin: var(--alert-status-line-gutter);
  margin-inline-end: 0;
  border-radius: var(--border-radius-s);
  inline-size: var(--alert-status-line-width);
  background-color: var(--alert-status-line-color);
}
.ButtonBase.IconButtonNext.Alert-CloseButton {
  --icon-button-font-color: var(--alert-close-button-color);
  --icon-button-font-color-hover: var(--alert-close-button-color);
  --icon-button-font-color-active: var(--alert-close-button-color);
  --icon-button-font-color-focus: var(--alert-close-button-color);
  position: absolute;
  margin: var(--spacing-xs);
  inset-inline-end: 0;
  inset-block-start: 0;
}