@synergy-design-system/components/dist/chunks/chunk.ZCUURSJU.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

// src/components/alert/alert.custom.styles.ts
import { css } from "lit";
var alert_custom_styles_default = css`
  .alert {
    /* Defines the used border and icon color for variants */
    --variant-color-border: var(--syn-alert-informative-color-border, var(--syn-panel-border-color));
    --variant-color-background: var(--syn-alert-informative-color-background, var(--syn-panel-background-color));
    --variant-color-icon: var(--syn-alert-informative-color-icon, var(--syn-color-primary-600));
    --variant-color-indicator: var(--syn-alert-informative-color-indicator, var(--syn-color-primary-600));

    /* Defines special settings for sizes */
    --size-font-size: var(--syn-font-size-medium);
    --size-icon-size: var(--syn-font-size-x-large);
    --size-min-height: 54px;
    --size-message-padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
    --size-icon-padding-block: var(--syn-spacing-medium);
    --size-icon-padding-inline: var(--syn-spacing-medium);

    background-color: var(--variant-color-background);
    border: var(--syn-panel-border-width) solid var(--variant-color-border);
    border-left: 0;
    border-radius: var(--syn-border-radius-none);
    box-sizing: content-box;
    color: var(--syn-typography-color-text);
    font-size: var(--size-font-size);
    line-height: var(--syn-line-height-normal);
    min-height: var(--size-min-height);
  }

  /**
   * Add back the items left borders
   * This is done to prevent border clipping with the large border-left needed on .alert
   * Note we also need to adjust our paddings to add the border width here
   */
  .alert::before {
    background: var(--variant-color-indicator);
    bottom: -1px;
    content: "";
    left: 0;
    position: absolute;
    top: -1px;
    width: var(--syn-spacing-2x-small);
  }

  .alert :first-child {
    margin-inline-start: var(--syn-spacing-2x-small);
  }

  /**
   * Make sure everything is aligned to top
   */
  .alert__icon,
  .alert__close-button {
    align-items: flex-start;
    font-size: var(--size-icon-size);
  }

  .alert__message {
    align-self: center;
    padding: var(--size-message-padding);
  }

  /**
   * Alert Icon
   */
  .alert__icon {
    color: var(--variant-color-icon);
    padding-block-start: var(--size-icon-padding-block);
    padding-inline-start: var(--size-icon-padding-inline);
  }

  /**
   * Close Icon
   */
  .alert__close-button {
    align-self: start; /* #1135: Fix alignment for the close icon */
    color: var(--syn-typography-color-text);
    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
    margin-inline-end: var(--syn-spacing-x-small);
  }

  /**
   * Variant colors
   */
  .alert--success {
    --variant-color-border: var(--syn-alert-success-color-border, var(--syn-panel-border-color));
    --variant-color-background: var(--syn-alert-success-color-background, var(--syn-panel-background-color));
    --variant-color-icon: var(--syn-alert-success-color-icon, var(--syn-color-success-500));
    --variant-color-indicator: var(--syn-alert-success-color-indicator, var(--syn-color-success-500));
  }

  .alert--neutral {
    --variant-color-border: var(--syn-alert-neutral-color-border, var(--syn-panel-border-color));
    --variant-color-background: var(--syn-alert-neutral-color-background, var(--syn-panel-background-color));
    --variant-color-icon: var(--syn-alert-neutral-color-icon, var(--syn-color-neutral-800));
    --variant-color-indicator: var(--syn-alert-neutral-color-indicator, var(--syn-color-neutral-800));
  }

  .alert--warning {
    --variant-color-border: var(--syn-alert-warning-color-border, var(--syn-panel-border-color));
    --variant-color-background: var(--syn-alert-warning-color-background, var(--syn-panel-background-color));
    --variant-color-icon: var(--syn-alert-warning-color-icon, var(--syn-color-warning-400));
    --variant-color-indicator: var(--syn-alert-warning-color-indicator, var(--syn-color-warning-400));
  }

  .alert--danger {
    --variant-color-border: var(--syn-alert-error-color-border, var(--syn-panel-border-color));
    --variant-color-background: var(--syn-alert-error-color-background, var(--syn-panel-background-color));
    --variant-color-icon: var(--syn-alert-error-color-icon, var(--syn-color-error-600));
    --variant-color-indicator: var(--syn-alert-error-color-indicator, var(--syn-color-error-600));
  }

  /* #1119: Alert Sizes */
  .alert--small {
    --size-font-size: var(--syn-font-size-small);
    --size-icon-size: var(--syn-font-size-large);
    --size-min-height: 44px;
    --size-message-padding: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-small);
    --size-icon-padding-block: var(--syn-spacing-small);
    --size-icon-padding-inline: var(--syn-spacing-small);
  }

  /* Adjust close button size for small alerts */
  .alert--small .alert__close-button {
    font-size: var(--syn-font-size-medium);
  }

  .alert--large {
    --size-font-size: var(--syn-font-size-large);
    --size-icon-size: var(--syn-font-size-2x-large);
    --size-min-height: 68px;
    --size-message-padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-medium-large) var(--syn-spacing-medium-large);
    --size-icon-padding-block: var(--syn-spacing-medium-large);
    --size-icon-padding-inline: var(--syn-spacing-medium-large);
  }
`;

export {
  alert_custom_styles_default
};
//# sourceMappingURL=chunk.ZCUURSJU.js.map