@use "sass:map";
@use "../base/color" as cl;
@use "../base/border" as bo;
@use "../base/font" as ft;
@use "../base/space" as sp;
@use "../base/variants" as vr;

// Alerts / inline banners
//
//   <div class="qo-alert qo-alert-info">
//     <i class="qo-alert-icon fa-solid fa-circle-info"></i>
//     Lite User Role cannot be edited.
//   </div>

.qo-alert {
  padding: 9px sp.$space-3;
  display: flex;
  align-items: center;
  gap: sp.$space-2;
  border: bo.$border-width-sm solid transparent;
  border-radius: bo.$border-radius-sm;
  background-color: cl.$background-info-soft;
  color: cl.$text-info;
  font-family: ft.$font-family-primary;
  font-size: ft.$font-size-sm;
  font-weight: ft.$font-weight-medium;
  line-height: ft.$line-height-sm;

  &.qo-alert-block { align-items: flex-start; }
  &.qo-alert-lg { padding: sp.$space-3 sp.$space-4; font-size: ft.$font-size-md; }

  // Tint fill + ink, for every semantic and status variant.
  @each $name, $spec in vr.$tint-variants {
    &.qo-alert-#{$name} {
      background-color: map.get($spec, soft);
      color: map.get($spec, ink);
    }
  }

  // Outlined form, for a banner that must not read as a filled block.
  @each $name, $spec in vr.$variants {
    &.qo-alert-outline-#{$name} {
      background-color: transparent;
      border-color: map.get($spec, base);
      color: map.get($spec, ink);
    }
  }

  // Left accent stripe.
  @each $name, $spec in vr.$variants {
    &.qo-alert-accent-#{$name} {
      border-left: bo.$border-width-lg solid map.get($spec, base);
    }
  }
}

.qo-alert-icon {
  flex: 0 0 auto;
  font-size: ft.$font-size-lg;
  line-height: 1;
}

.qo-alert-title {
  display: block;
  margin-bottom: 2px;
  font-weight: ft.$font-weight-semibold;
}

// Dismiss affordance — an alert that can be closed needs a real button.
.qo-alert-close {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: ft.$font-size-lg;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;

  &:hover { opacity: 1; }
  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; border-radius: bo.$border-radius-sm; }
}