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

@use "../../di";

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

@mixin _variant($background, $border, $text-color) {
  color: $text-color;
  background-color: $background;
  border-color: $border;
}

@mixin children() {
  a {
    text-decoration: underline;

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

  .dso-banner-inner {
    line-height: typography.$line-height-base;
    position: relative;
    padding-inline: units.$u2;

    dso-icon-button {
      position: absolute;
      inset-inline-end: units.$u2;
      inset-block-start: 0;
      --_dso-icon-button-tertiary-color: #000;
    }

    > .dso-rich-content {
      padding-inline-end: units.$u3;

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: colors.$zwart;
        font-size: 1rem;
        line-height: typography.$line-height-base;
        margin-block-end: 0;

        + p {
          display: inline;

          + * {
            margin-block-start: units.$u2;
          }
        }
      }

      > h2:first-child {
        float: inline-start;
        margin-inline-end: units.$u1;
      }

      *:first-child {
        margin-block-start: 0;
      }

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

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

  border-color: banner-variables.$success-border;
}

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

  border-color: banner-variables.$error-border;
}

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

  border-color: banner-variables.$info-border;
}

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

  border-color: banner-variables.$warning-border;
}

@mixin root() {
  padding-block: units.$u2;
  padding-inline: 0;
  position: relative;

  &.dso-compact {
    padding-block: 12px;
    padding-inline: 0;
  }
}

@mixin with-icon($variant) {
  .dso-banner-inner {
    &::before {
      @include di.base("status-#{$variant}");
    }
  }
}