@use '../config' as *;

.alert {
  // scss-docs-start alert-css-vars
  --alert-variant-color: var(--body-color);
  --alert-color: var(--alert-variant-color);
  --alert-bg: #{color-transparent(var(--alert-variant-color), 0.16, var(--bg-surface))};
  --alert-padding-x: #{$alert-padding-x};
  --alert-padding-y: #{$alert-padding-y};
  --alert-margin-bottom: #{$alert-margin-bottom};
  --alert-border-color: #{color-transparent(var(--alert-variant-color), 0.2, var(--bg-surface))};
  --alert-border: var(--border-width) solid var(--alert-border-color);
  --alert-border-radius: var(--border-radius);
  --alert-link-color: inherit;
  --alert-heading-font-weight: var(--font-weight-medium);
  --alert-heading-margin-bottom: #{$alert-heading-margin-bottom};
  --alert-icon-size: #{$alert-icon-size};
  --alert-padding-inline-end: #{$alert-padding-inline-end};
  --alert-gap: #{$alert-gap};
  // scss-docs-end alert-css-vars

  position: relative;
  padding: var(--alert-padding-y) var(--alert-padding-x);
  margin-bottom: var(--alert-margin-bottom);
  color: var(--alert-color);
  background-color: color-mix(in oklab, var(--alert-bg), var(--bg-surface));
  border: var(--border-width) var(--border-style) var(--alert-border-color);
  @include border-radius(var(--alert-border-radius));

  &:has(> .alert-icon) {
    padding-inline-start: calc(var(--alert-padding-x) + var(--alert-icon-size) + var(--alert-gap));
  }
}

.alert-heading {
  margin-bottom: var(--alert-heading-margin-bottom);
  font-weight: var(--alert-heading-font-weight);
  color: inherit;
}

.alert-description {
  color: var(--secondary);
}

.alert-icon {
  width: var(--alert-icon-size) !important;
  height: var(--alert-icon-size) !important;
  margin-inline-end: var(--alert-gap);
  color: var(--alert-color);
}

.alert > .alert-icon {
  position: absolute;
  inset-inline-start: var(--alert-padding-x);
  top: var(--alert-padding-y);
  margin-inline-end: 0;
}

.alert-action,
.alert-link {
  margin-inline-start: 0.25rem;
  white-space: nowrap;
}

.alert-action {
  color: var(--alert-color);
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

.alert-list {
  margin: 0;
}

.alert > .alert-heading + div:has(+ .alert-action),
.alert > .alert-heading + div:has(+ .alert-link) {
  display: inline;
}

.alert-link {
  font-weight: $alert-link-font-weight;
  color: var(--alert-link-color);

  &:hover {
    color: var(--alert-link-color);
  }
}

.alert-dismissible {
  padding-inline-end: var(--alert-padding-inline-end);

  .btn-close {
    position: absolute;
    inset-inline-end: calc(var(--alert-padding-x) / 2 - 1px);
    top: calc(var(--alert-padding-y) / 2 - 1px);
    z-index: 1;
    padding: calc(var(--alert-padding-y) * 1.25) var(--alert-padding-x);
  }
}

.alert-important {
  // Set the shared color token so every child that reads it - text, icon,
  // `.alert-action`, `.alert-link` - flips to white instead of the variant
  // color, which is the background here.
  --alert-color: var(--white);
  background-color: var(--alert-variant-color);

  .alert-description {
    color: inherit;
  }
}

.alert-minor {
  background: transparent;
  border-color: var(--border-color);
}

@each $name, $color in $theme-colors {
  .alert-#{$name} {
    --alert-variant-color: var(--#{$name});
  }
}