// Global config
#{$ouds-root-selector} {
  --#{$prefix}alert-border-radius: #{$ouds-alert-border-radius-default};
}

.use-rounded-corner-alert {
  --#{$prefix}alert-border-radius: #{$ouds-alert-border-radius-rounded};
}

// Alert component
.alert {
  // Default to neutral variant
  --#{$prefix}alert-text-color: #{$ouds-color-content-default};
  --#{$prefix}alert-icon-color: #{$ouds-color-content-default};
  --#{$prefix}alert-bg: #{$ouds-color-surface-secondary};
  --#{$prefix}alert-border-color: #{$ouds-color-border-default};

  display: flex;
  gap: $ouds-alert-space-column-gap;
  align-items: flex-start;
  color: var(--#{$prefix}alert-text-color);
  @include border-radius(var(--#{$prefix}alert-border-radius));
}

.alert-message {
  --#{$prefix}alert-icon-margin-block: #{$ouds-alert-space-padding-block}; // Here to avoid an encapsulation
  min-width: $ouds-alert-size-min-width;
  min-height: $ouds-alert-size-min-height;
  padding-inline: $ouds-alert-space-padding-inline;
  background-color: var(--#{$prefix}alert-bg);
  border: var(--#{$prefix}alert-border-color) solid $ouds-alert-border-width;

  &:has(.btn-close) {
    padding-right: 0;
  }

  &:has(.alert-container > .link) {
    min-height: $ouds-alert-size-min-height-bottom-action-placement;
  }

  // To avoid overflow: hidden that hides the focus
  .btn-close {
    @include border-top-end-radius(var(--#{$prefix}alert-border-radius));
  }

  @supports not (container-type: size) {
    &:not(:has(.alert-text-container p:not(.alert-label), .alert-text-container ul, .alert-container .link)) .btn-close {
      @include border-bottom-end-radius(var(--#{$prefix}alert-border-radius));
    }
  }
}

.alert-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: px-to-rem($ouds-alert-size-icon);
  height: px-to-rem($ouds-alert-size-icon);
  margin-top: var(--#{$prefix}alert-icon-margin-block);
  color: var(--#{$prefix}alert-icon-color);

  &:where(:not(:has(svg, img, .icon))) {
    &::before,
    &::after {
      position: absolute;
      inset: 0;
      display: block;
      content: "";
    }

    &::before {
      background-color: currentcolor;
      mask-image: escape-svg(var(--#{$prefix}alert-icon));
    }

    &::after {
      background-color: var(--#{$prefix}alert-icon-internal-color);
      mask-image: escape-svg(var(--#{$prefix}alert-icon-internal));
    }
  }

  svg,
  img,
  .icon {
    width: 100%;
    height: 100%;
    font-size: $ouds-alert-size-icon;
    line-height: 1;
    vertical-align: baseline; // Remove some weird stuff on zoom // TODO: For reboot maybe ?
  }
}

.alert-container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: $ouds-alert-space-row-gap-action;
  align-items: flex-start;
  justify-content: center; // To handle weird edge cases in de-zoom one line title alert
  min-height: $ouds-alert-size-min-height; // To handle weird edge cases in de-zoom one line title alert
  padding-block: $ouds-alert-space-padding-block;
}

.alert-text-container {
  display: flex;
  flex-direction: column;
  gap: $ouds-alert-space-row-gap;

  > * { // To handle any content inside this text-container.
    max-width: var(--#{$prefix}font-max-width-label-medium);
    margin-bottom: 0;
    @include get-font-size("label-medium");
    font-weight: $ouds-font-weight-web-label-default;
  }

  ul {
    padding-left: 0;
    list-style-type: "";

    > li {
      position: relative;
      padding-left: calc(px-to-rem(20px) + 8px);

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: px-to-rem(20px);
        height: px-to-rem(20px);
        height: 1lh;
        content: "";
        background-color: currentcolor;
        mask-image: $bullet-list-marker-level-0;
        mask-repeat: no-repeat;
        mask-position: center right;
        mask-size: px-to-rem(16px);
      }
    }
  }
}

.alert-action-container {
  display: flex;
  gap: $ouds-alert-space-column-gap-action;
  // A small tweak to give height of alert message to alert-close-container or use alert-action-container without.
  align-items: flex-start;
  align-self: stretch;
}

.alert-close-container {
  align-self: stretch; // To have the alert-close-container height defined on the alert-message height
  width: calc(2 * $ouds-button-space-inset-icon-only + px-to-rem($ouds-button-size-icon-only));
  min-width: $ouds-button-size-min-width; // To handle some zoom '-' issues
  container-type: size;

  // Complete the border-radius of the button
  .btn-close {
    @container (height <= #{$ouds-alert-size-min-height}) {
      @include border-bottom-end-radius(var(--#{$prefix}alert-border-radius));
    }
  }
}

.alert-label {
  max-width: var(--#{$prefix}font-max-width-label-large);
  margin-bottom: 0;
  @include get-font-size("label-large");
  font-weight: $ouds-font-weight-web-label-moderate;
}

// Variants
.alert-accent {
  --#{$prefix}alert-text-color: #{$ouds-color-content-default};
  --#{$prefix}alert-icon-color: #{$ouds-color-content-status-accent};
  --#{$prefix}alert-bg: #{$ouds-color-surface-status-accent-muted};
  --#{$prefix}alert-border-color: #{$ouds-color-border-status-accent};

  &.alert-message {
    --#{$prefix}alert-text-color: #{$ouds-color-content-on-status-accent-muted};
  }
}

.alert-negative {
  --#{$prefix}alert-text-color: #{$ouds-color-content-status-negative};
  --#{$prefix}alert-icon: var(--#{$prefix}error-icon);
  --#{$prefix}alert-icon-color: #{$ouds-color-content-status-negative};
  --#{$prefix}alert-bg: #{$ouds-color-surface-status-negative-muted};
  --#{$prefix}alert-border-color: #{$ouds-color-border-status-negative};

  &.alert-message {
    --#{$prefix}alert-text-color: #{$ouds-color-content-on-status-negative-muted};
  }
}

.alert-positive {
  --#{$prefix}alert-text-color: #{$ouds-color-content-status-positive};
  --#{$prefix}alert-icon: var(--#{$prefix}success-icon);
  --#{$prefix}alert-icon-color: #{$ouds-color-content-status-positive};
  --#{$prefix}alert-bg: #{$ouds-color-surface-status-positive-muted};
  --#{$prefix}alert-border-color: #{$ouds-color-border-status-positive};

  &.alert-message {
    --#{$prefix}alert-text-color: #{$ouds-color-content-on-status-positive-muted};
  }
}

.alert-info {
  --#{$prefix}alert-text-color: #{$ouds-color-content-status-info};
  --#{$prefix}alert-icon: var(--#{$prefix}info-icon);
  --#{$prefix}alert-icon-color: #{$ouds-color-content-status-info};
  --#{$prefix}alert-bg: #{$ouds-color-surface-status-info-muted};
  --#{$prefix}alert-border-color: #{$ouds-color-border-status-info};

  &.alert-message {
    --#{$prefix}alert-text-color: #{$ouds-color-content-on-status-info-muted};
  }
}

.alert-warning {
  --#{$prefix}alert-text-color: #{$ouds-color-content-status-warning};
  --#{$prefix}alert-icon: var(--#{$prefix}warning-icon);
  --#{$prefix}alert-icon-color: var(--#{$prefix}icon-color-content-status-warning-external-shape);
  --#{$prefix}alert-icon-internal: var(--#{$prefix}warning-internal-icon);
  --#{$prefix}alert-icon-internal-color: var(--#{$prefix}icon-color-content-status-warning-internal-shape);
  --#{$prefix}alert-bg: #{$ouds-color-surface-status-warning-muted};
  --#{$prefix}alert-border-color: #{$ouds-color-border-status-warning};

  &.alert-message {
    --#{$prefix}alert-text-color: #{$ouds-color-content-on-status-warning-muted};
  }
}

// Bootstrap compatibility
@if $enable-bootstrap-compatibility {
  .alert {
    > svg,
    > img,
    > .icon {
      @extend .alert-icon;
      fill: currentcolor;
    }
  }

  .alert-danger {
    @extend .alert-negative;
  }

  .alert-success {
    @extend .alert-positive;
  }

  .alert-primary {
    @extend .alert-accent;
  }

  .alert-heading {
    @extend .alert-label;
  }
}