/*
  colors: a-alert--info, a-alert--warning, a-alert--error, a-alert--ai (default success)
  position: a-alert--sticky (non-sticky default)
*/

.a-alert {
  --bg: var(--lens-semantic-color-status-success-background);
  --color: var(--lens-semantic-color-status-success-text);
  --radius: var(--lens-semantic-radius-lg);
  --px: var(--lens-semantic-spacing-desktop-padding-2);
  --py: var(--lens-semantic-spacing-desktop-padding-1);
  --gap: var(--lens-semantic-spacing-desktop-gap-1-5);
  --font-size: var(--lens-semantic-font-text-body-font-size);
  --line-height: var(--lens-semantic-font-text-body-line-height);
  --letter-spacing: var(--lens-semantic-font-text-body-letter-spacing);
  --icon-size: var(--lens-semantic-icon-size-lg);
  display: flex;
  align-items: center;
  background: var(--a-alert-bg, var(--bg));
  color: var(--a-alert-color, var(--color));
  border-radius: var(--a-alert-radius, var(--radius));
  padding: var(--a-alert-padding-y, var(--py)) var(--a-alert-padding-x, var(--px));
  gap: var(--a-alert-gap, var(--gap));
  font-size: var(--a-alert-font-size, var(--font-size));
  line-height: var(--a-alert-line-height, var(--line-height));
  letter-spacing: var(--a-alert-letter-spacing, var(--letter-spacing));
  &.a-alert--info,
  &.a-alert--ai {
    --bg: var(--lens-semantic-color-status-notification-background);
    --color: var(--lens-semantic-color-status-notification-text);
  }
  &.a-alert--warning {
    --bg: var(--lens-semantic-color-status-warning-background);
    --color: var(--lens-semantic-color-status-warning-text);
  }
  &.a-alert--error {
    --bg: var(--lens-semantic-color-status-error-background);
    --color: var(--lens-semantic-color-status-error-text);
  }
  &.a-alert--sticky {
    position: sticky;
    top: 0;
    --radius: var(--lens-semantic-border-radius-none);
  }
}

.a-alert-content {
  --gap: var(--a-alert-content-gap, var(--lens-semantic-spacing-desktop-gap-0));
  --py: var(--a-alert-content-padding-y, var(--lens-semantic-spacing-desktop-padding-1));
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--gap);
  padding-block: var(--py);
  &:has(.a-alert-title + .a-alert-message) {
    --py: var(--lens-semantic-spacing-desktop-padding-0-5);
  }
}

.a-alert-buttons {
  --gap: var(--a-alert-buttons-gap, var(--lens-semantic-spacing-desktop-gap-1));
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.a-alert-title,
.a-alert-message {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--a-alert-color, var(--color));
  &:is(p) {
    margin: 0;
    color: var(--a-alert-color, var(--color));
  }
}

.a-alert-title {
  --font-weight: var(--a-alert-title-font-weight, var(--lens-semantic-font-weight-emphasis));
  font-weight: var(--font-weight);
  &:is(p) {
    font-weight: var(--font-weight);
  }
}

.a-alert-icon {
  width: var(--a-alert-icon-size, var(--icon-size));
  height: var(--a-alert-icon-size, var(--icon-size));
  &:is(svg) {
    fill: var(--a-alert-color, var(--color));
  }
}