@import '../../../../../typography/utilities/typography-utility';

:host {
  /* Default values */
  --tds-message-background: var(--background-elevation-layer-03);
  --tds-message-background-error: var(--system-danger-subtle-03);
  --tds-message-background-warning: var(--background-elevation-layer-03);
  --tds-message-background-success: var(--background-elevation-layer-03);

  /* Variant values */
  .tds-mode-variant-primary {
    --tds-message-background: var(--background-elevation-layer-03);
    --tds-message-background-error: var(--system-danger-subtle-03);
    --tds-message-background-warning: var(--background-elevation-layer-03);
    --tds-message-background-success: var(--background-elevation-layer-03);
  }

  .tds-mode-variant-secondary {
    --tds-message-background: var(--background-elevation-layer-02);
    --tds-message-background-error: var(--system-danger-subtle-02);
    --tds-message-background-warning: var(--background-elevation-layer-02);
    --tds-message-background-success: var(--background-elevation-layer-02);
  }

  .wrapper {
    display: flex;
    padding: 16px;
    background-color: var(--tds-message-background);
    border-radius: 4px;

    &.information {
      border-left: 4px solid var(--system-info-default);

      tds-icon {
        color: var(--system-info-default);
      }
    }

    &.success {
      background-color: var(--tds-message-background-success);
      border-left: 4px solid var(--system-success-default);

      tds-icon {
        color: var(--system-success-default);
      }
    }

    &.error {
      background-color: var(--tds-message-background-error);
      border-left: 4px solid var(--system-danger-default);

      tds-icon {
        color: var(--system-danger-default);
      }
    }

    &.warning {
      background-color: var(--tds-message-background-warning);
      border-left: 4px solid var(--system-warning-default);

      tds-icon {
        color: var(--system-warning-default);
      }
    }

    &.minimal {
      border: none;
      padding: 0;
      background-color: transparent;

      .header {
        @include detail-02;
      }

      &.error {
        .header {
          color: var(--system-danger-default);
        }
      }
    }
  }

  tds-icon {
    padding-right: 16px;
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--foreground-text-strong);
    padding: 2px 0;

    .header {
      @include headline-07;
    }

    .extended-message {
      color: var(--foreground-text-strong);
      @include detail-02;
    }
  }
}