@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

.alert-title {
  font-size: size_variables.$size-5;
  font-weight: var(--token-typography-font-weight-bold);
}

.message {
  background: var(--token-color-palette-blue-50);
  border: 1px solid var(--token-color-palette-blue-100);
  margin-bottom: size_variables.$spacing-12;
  padding: size_variables.$spacing-12 size_variables.$spacing-16 size_variables.$spacing-16
    size_variables.$spacing-12;
  position: relative;

  &:not(:last-child) {
    margin-bottom: size_variables.$spacing-20;
  }

  .message-icon {
    color: var(--token-color-foreground-action);
    margin-right: size_variables.$spacing-8;
  }

  .message-title {
    color: var(--token-color-foreground-action);
    font-size: var(--token-typography-body-300-font-size);
    font-weight: var(--token-typography-font-weight-bold);
    line-height: 1.25;
  }

  .message-body {
    border: 0;
    padding: 1em 1.25em;
    margin-top: size_variables.$spacing-4;
  }

  // message types, see message-types.js
  &.is-danger {
    background: var(--token-color-surface-critical);
    border: 1px solid var(--token-color-palette-red-50);

    .message-body {
      color: var(--token-color-foreground-critical-on-surface);
    }

    .message-icon {
      color: var(--token-color-foreground-critical);
    }

    .message-title {
      color: var(--token-color-foreground-critical-on-surface);
    }
  }

  &.is-highlight {
    background: var(--token-color-surface-warning);
    border: 1px solid var(--token-color-border-warning);

    .message-body {
      color: var(--token-color-foreground-primary);
    }

    .message-icon {
      color: var(--token-color-foreground-warning);
    }

    .message-title {
      color: var(--token-color-foreground-warning-on-surface);
    }
  }

  &.is-info {
    background-color: var(--token-color-palette-blue-50);

    .message-body {
      color: var(--token-color-palette-blue-300);
    }

    .message-header {
      background-color: var(--token-color-palette-blue-200);
      color: hsl(0, 0%, 100%);
    }

    .message-title {
      color: var(--token-color-palette-blue-300);
    }
  }

  &.is-success {
    background: var(--token-color-surface-success);
    border: 1px solid var(--token-color-border-success);

    .message-body {
      color: var(--token-color-foreground-success-high-contrast);
    }

    .message-icon {
      color: var(--token-color-foreground-success);
    }

    .message-title {
      color: var(--token-color-foreground-success-on-surface);
    }
  }
}
