@use "sass:list";
@use "colors";
@use "variables";

/* =Notifications
-----------------------------------------------------------------------------*/

$alert-colors: (
  "blue":   (#edf5ff, #0043ce, #001d6c, #4589ff),
  "red":    (#fff1f1, #da1e28, #2d0709, #ff8389),
  "yellow": (#fdf6dd, #f1c21b, #302400, #f1c21b),
  "green":  (#defbe6, #198038, #071908, #42be65),
  "black":  (#e0e0e0, #161616, #262626, #8d8d8d),
);

.tools-alert,
.alert {
  padding: 0.75rem 1rem;
  background: var(--ply-bg-surface-alt, colors.$color-gray-pastel);
  color: var(--ply-color-body, colors.$color-black);
  margin-bottom: variables.$base-line;
  border-radius: var(--ply-border-radius);
  border-left: 4px solid colors.$color-gray-dark;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;

  // Stacked layout — column direction for multi-line alerts (e.g. CTA blocks)
  &.tools-alert-stack,
  &.alert-stack {
    flex-direction: column;
  }

  .tools-alert-icon,
  .alert-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
  }

  .tools-alert-content,
  .alert-content {
    flex: 1;
    min-width: 0;
  }

  .tools-alert-dismiss,
  .alert-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.15s ease;
    line-height: 1;
    font-size: 1.25rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -0.5rem -0.375rem -0.5rem 0;
    border-radius: var(--ply-border-radius);

    &:hover {
      opacity: 1;
    }

    &:focus-visible {
      opacity: 1;
      outline: 2px solid var(--ply-color-focus, #0f62fe);
      outline-offset: -2px;
    }

    &::before {
      content: '\00D7';
    }
  }
}

// Light alert color variants — Carbon-inspired support tints
@each $name, $values in $alert-colors {
  $light-bg: list.nth($values, 1);
  $light-border: list.nth($values, 2);

  .tools-alert-#{$name},
  .alert-#{$name} {
    background: $light-bg;
    border-left-color: $light-border;
  }
}

// Outline variant — keeps tinted bg, adds full border
.tools-alert-outline,
.alert-outline {
  border: 1px solid colors.$color-gray-dark;
  border-left-width: 4px;
}

@each $name, $values in $alert-colors {
  $light-border: list.nth($values, 2);

  .tools-alert-outline.tools-alert-#{$name},
  .alert-outline.alert-#{$name} {
    border-color: $light-border;
  }
}

// Ghost variant — transparent bg, border only
.tools-alert-ghost,
.alert-ghost {
  background: transparent;
  border: 1px solid colors.$color-gray-dark;
  border-left-width: 4px;
}

@each $name, $values in $alert-colors {
  $light-border: list.nth($values, 2);

  .tools-alert-ghost.tools-alert-#{$name},
  .alert-ghost.alert-#{$name} {
    background: transparent;
    border-color: $light-border;
  }
}

// Toast messages — alerts positioned fixed in the top-right
.tools-message,
.message {
  position: fixed;
  z-index: 110;
  top: 10px;
  right: 10px;
  max-width: 350px;
  border-left: none;
}

// Dark alert variants — Carbon Gray 90 tinted
@mixin dark-alerts {
  .tools-alert,
  .alert {
    background: var(--ply-bg-surface-alt);
    color: var(--ply-color-body);
    border-left-color: #6f6f6f;
  }

  @each $name, $values in $alert-colors {
    $dark-bg: list.nth($values, 3);
    $dark-border: list.nth($values, 4);

    .tools-alert-#{$name},
    .alert-#{$name} {
      background: $dark-bg;
      border-left-color: $dark-border;
    }

    .tools-alert-outline.tools-alert-#{$name},
    .alert-outline.alert-#{$name} {
      border-color: $dark-border;
    }

    .tools-alert-ghost.tools-alert-#{$name},
    .alert-ghost.alert-#{$name} {
      border-color: $dark-border;
    }
  }

  .tools-alert-ghost,
  .alert-ghost {
    background: transparent;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    @include dark-alerts;
  }
}

[data-theme="dark"] {
  @include dark-alerts;
}