@ozen-ui/kit/__inner__/esm/components/SectionMessage/SectionMessage.css

React component library

/* stylelint-disable */
.SectionMessage {
  --section-message-icon-padding: 2px;
  padding: var(--section-message-padding);
  -moz-column-gap: var(--section-message-column-gap);
       column-gap: var(--section-message-column-gap);
  border-radius: var(--section-message-border-radius);
  background-color: var(--section-message-background-color);
  display: flex;
  overflow: auto;
  inline-size: 100%;
  box-sizing: border-box;
  align-items: flex-start;
}
.SectionMessage_status_info {
      --section-message-icon-color: var(--color-content-info);
      --section-message-background-color: var(--color-background-info-light);
      --section-message-button-color: var(--color-content-info);
      --section-message-button-color-hover: var(--color-content-info-dark);
    }
.SectionMessage_status_neutral {
      --section-message-icon-color: var(--color-content-primary);
      --section-message-background-color: var(--color-background-secondary);
      --section-message-button-color: var(--color-content-action);
      --section-message-button-color-hover: var(--color-content-action-dark);
    }
.SectionMessage_status_warning {
      --section-message-icon-color: var(--color-content-warning);
      --section-message-background-color: var(--color-background-warning-light);
      --section-message-button-color: var(--color-content-warning);
      --section-message-button-color-hover: var(--color-content-warning-dark);
    }
.SectionMessage_status_success {
      --section-message-icon-color: var(--color-content-success);
      --section-message-background-color: var(--color-background-success-light);
      --section-message-button-color: var(--color-content-success);
      --section-message-button-color-hover: var(--color-content-success-dark);
    }
.SectionMessage_status_error {
      --section-message-icon-color: var(--color-content-error);
      --section-message-background-color: var(--color-background-error-light);
      --section-message-button-color: var(--color-content-error);
      --section-message-button-color-hover: var(--color-content-error-dark);
    }
.SectionMessage_size_xs {
      --section-message-padding: 12px;
      --section-message-column-gap: var(--spacing-2xs);
      --section-message-icon-padding: 0;
      --section-message-border-radius: var(--border-radius-m);

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

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

      text-transform: var(--typography-text-xs-text_transform, none);
    }
.SectionMessage_size_xs .SectionMessage-Title {
        font: var(--typography-text-xs_1-font);
        letter-spacing: var(--typography-text-xs_1-letter_spacing, 0);
        text-transform: var(--typography-text-xs_1-text_transform, none);
      }
.SectionMessage_size_s {
      --section-message-padding: 14px 16px;
      --section-message-column-gap: var(--spacing-xs);
      --section-message-border-radius: var(--border-radius-l);

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

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

      text-transform: var(--typography-text-s-text_transform, none);
    }
.SectionMessage_size_s .SectionMessage-Title {
        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);
      }
.SectionMessage_size_m {
      --section-message-padding: 16px 20px;
      --section-message-column-gap: var(--spacing-xs);
      --section-message-icon-padding: 0;
      --section-message-border-radius: var(--border-radius-l);

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

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

      text-transform: var(--typography-text-m-text_transform, none);
    }
.SectionMessage_size_m .SectionMessage-Title {
        font: var(--typography-text-m_1-font);
        letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
        text-transform: var(--typography-text-m_1-text_transform, none);
      }
.SectionMessage_size_l {
      --section-message-padding: 18px 24px;
      --section-message-column-gap: var(--spacing-s);
      --section-message-border-radius: var(--border-radius-l);

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

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

      text-transform: var(--typography-text-l-text_transform, none);
    }
.SectionMessage_size_l .SectionMessage-Title {
        font: var(--typography-text-l_1-font);
        letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
        text-transform: var(--typography-text-l_1-text_transform, none);
      }
.SectionMessage-Icon {
    display: flex;
    color: var(--section-message-icon-color);
    padding-block-start: var(--section-message-icon-padding);
  }
.SectionMessage-Title {
    display: flex;
    align-items: center;
  }
.SectionMessage-Action {
    margin-block-start: var(--spacing-2xs);
  }
.SectionMessage-Button.Button {
    color: var(--section-message-button-color);
  }
.SectionMessage-Button.Button:hover,
    .SectionMessage-Button.Button:focus:not(:focus-visible) {
      color: var(--section-message-button-color);
    }
.SectionMessage-Button.Button:focus {
      color: var(--section-message-button-color-hover);
    }