@use '../../theme/styles' as theme;

$alert-colors: (
  info: info,
  success: success,
  warning: warning,
  danger: danger,
);

.wr-alert {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  // Claim the full row even when nested in a flex-row demo wrapper.
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;

  // Defaults — overridden per variant below.
  --wr-alert-bg: var(--wr-color-info-soft);
  --wr-alert-border: var(--wr-color-info-soft-border);
  --wr-alert-title: var(--wr-color-info);
  --wr-alert-message: var(--wr-color-dark);
  --wr-alert-close: var(--wr-color-info);

  background: var(--wr-alert-bg);
  border: 1px solid var(--wr-alert-border);
  @include theme.smooth-br(var(--wr-border-radius-base));
  padding: 0.625rem 0.875rem;

  &--dismissed {
    display: none;
  }

  &__icon {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    color: var(--wr-alert-title);
    // A custom `<wr-icon>` sizes via this var, not width/height.
    --wr-icon-size: 1.125rem;
  }

  // `<wr-icon>` sets `color: inherit` on its own host at equal specificity;
  // the type selector wins it back so a custom icon takes the intent colour.
  wr-icon.wr-alert__icon {
    color: var(--wr-alert-title);
  }

  &__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  &__title {
    margin: 0;
    color: var(--wr-alert-title);
    font-family: var(--wr-font-family-base);
    font-size: var(--wr-text-sm);
    font-weight: 600;
    line-height: 1.25rem;
  }

  &__message {
    margin: 0;
    color: var(--wr-alert-message);
    font-family: var(--wr-font-family-base);
    font-size: var(--wr-text-sm);
    line-height: 1.125rem;
  }

  &__close {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.125rem;
    color: var(--wr-alert-close);
    cursor: pointer;
    border-radius: var(--wr-border-radius-sm);
    transition:
      color var(--wr-transition-base),
      background var(--wr-transition-base);

    --wr-icon-size: 1rem;

    @include theme.touch-target; // ~20px glyph -> 44px tap area on touch

    &:hover {
      color: var(--wr-alert-title);
      background: var(--wr-color-hover);
    }
  }

  @each $variant, $color in $alert-colors {
    &--#{$variant} {
      --wr-alert-bg: var(--wr-color-#{$color}-soft);
      --wr-alert-border: var(--wr-color-#{$color}-soft-border);
      --wr-alert-title: var(--wr-color-#{$color});
      --wr-alert-close: var(--wr-color-#{$color});
    }
  }

  // Neutral — muted gray chip, reusing the `medium` soft tokens.
  &--neutral {
    --wr-alert-bg: var(--wr-color-medium-soft);
    --wr-alert-border: var(--wr-color-medium-soft-border);
    --wr-alert-title: var(--wr-color-dark);
    --wr-alert-message: var(--wr-color-medium);
    --wr-alert-close: var(--wr-color-medium);

    .wr-alert__icon {
      color: var(--wr-color-medium);
    }
  }

  // Offline — inverse chip. Auto-flips via the theme tokens: dark bg +
  // light text in light theme; light bg + dark text in dark theme.
  &--offline {
    --wr-alert-bg: var(--wr-color-dark);
    --wr-alert-border: var(--wr-color-dark);
    --wr-alert-title: var(--wr-color-white);
    --wr-alert-message: var(--wr-color-white);
    --wr-alert-close: var(--wr-color-white);
  }
}