@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/typography";
@use "../../variables/media-query-breakpoints";

@use "../button";
@use "alert.variables" as alert-variables;
@use "../../global/mixins/set-colors.mixin" as set-colors;

@mixin icon-position() {
  inset-block-start: alert-variables.$inline-padding - alert-variables.$border-size;
  inset-inline-start: alert-variables.$inline-padding - alert-variables.$border-size;
  position: absolute;
}

@mixin children() {
  > .dso-rich-content {
    *:first-child {
      margin-block-start: 0 !important;
    }

    *:last-child {
      margin-block-end: 0 !important;
    }

    #{typography.$headings} {
      color: colors.$zwart;
      font-size: 1em;
      line-height: typography.$line-height-base;
      margin-block-end: units.$u1;
      margin-block-start: units.$u1;
    }

    .dso-alert-button {
      background-color: rgba(25, 25, 25, 0.05);
      border-radius: button.$border-radius;
      border: 1px solid transparent;
      padding-block: 6px;
      padding-inline: 12px;

      &:hover,
      &:active {
        background-color: rgba(25, 25, 25, 0.2);
        color: colors.$zwart;
      }
    }
  }

  a {
    &:active {
      text-decoration: none;
    }
  }
}

@mixin status-success() {
  @include set-colors.apply(alert-variables.$success-bg, "alert");

  border-color: var(--_dso-alert-success-border-color, alert-variables.$success-bg);
}

@mixin status-error() {
  @include set-colors.apply(alert-variables.$danger-bg, "alert");

  border-color: var(--_dso-alert-error-border-color, alert-variables.$danger-bg);
}

@mixin status-warning() {
  @include set-colors.apply(alert-variables.$warning-bg, "alert");

  border-color: var(--_dso-alert-warning-border-color, alert-variables.$warning-bg);
}

@mixin status-info() {
  @include set-colors.apply(alert-variables.$info-bg, "alert");

  border-color: var(--_dso-alert-info-border-color, alert-variables.$info-bg);
}

@mixin root() {
  line-height: typography.$line-height-base;
  margin-block-end: var(--_dso-alert-margin-block-end, typography.$line-height-computed);
  min-block-size: 2 * alert-variables.$inline-padding + alert-variables.$icon-size;
  position: relative;
  border: 1px solid transparent;

  @media screen and (min-width: #{media-query-breakpoints.$screen-xs-min + 1}) {
    padding-block: (alert-variables.$block-padding - alert-variables.$border-size);
    padding-inline: (alert-variables.$inline-start-padding - alert-variables.$border-size)
      (units.$u5 - alert-variables.$border-size);

    &.dso-compact {
      padding-block: alert-variables.$block-padding * 0.5 - alert-variables.$border-size;
      padding-inline: (alert-variables.$inline-padding - alert-variables.$border-size)
        (units.$u5 - alert-variables.$border-size);
    }
  }

  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {
    padding-block: (alert-variables.$small-padding-block-start - alert-variables.$border-size)
      (alert-variables.$small-padding - alert-variables.$border-size);
    padding-inline: alert-variables.$small-padding - alert-variables.$border-size;

    &.dso-compact {
      padding-block: alert-variables.$block-padding * 0.5 - alert-variables.$border-size;
      padding-inline: alert-variables.$inline-padding - alert-variables.$border-size;
    }
  }

  &:not(:first-child) {
    margin-block-start: units.$u3;
  }

  .icon-status {
    @include icon-position();
  }

  &.dso-compact {
    @include compact();

    min-block-size: alert-variables.$inline-padding;
  }

  &.alert-success {
    @include status-success();

    &.dso-compact::before {
      background-color: alert-variables.$success-compact-accent-bg;
    }
  }

  &.alert-error {
    @include status-error();

    &.dso-compact::before {
      background-color: alert-variables.$danger-compact-accent-bg;
    }
  }

  &.alert-warning {
    @include status-warning();

    &.dso-compact::before {
      background-color: alert-variables.$warning-compact-accent-bg;
    }
  }

  &.alert-info {
    @include status-info();

    &.dso-compact::before {
      background-color: alert-variables.$info-compact-accent-bg;
    }
  }
}

@mixin compact() {
  border-end-end-radius: units.$u1;
  border-start-end-radius: units.$u1;
  margin-inline-start: units.$u1;

  &::before {
    content: "";
    position: absolute;
    inset-block-start: alert-variables.$border-size * -1;
    inset-block-end: alert-variables.$border-size * -1;
    inset-inline-start: (units.$u1 + alert-variables.$border-size) * -1;
    border-start-start-radius: units.$u1;
    border-end-start-radius: units.$u1;
    inline-size: units.$u1;
  }
}