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

@use "../button";
@use "../step-counter";

@use "highlight-box.variables" as highlight-box-variables;

@mixin root() {
  margin-block-start: units.$u2;
  padding: units.$u2;
  margin-block-end: units.$block-spacing-large;

  block-size: var(--highlight-box-block-size, unset);
  min-block-size: var(--highlight-box-min-block-size, unset);

  &[has-counter] {
    block-size: var(--highlight-box-counter-block-size, unset);
  }

  &:not([has-counter]) {
    block-size: var(--highlight-box-nocounter-block-size, unset);
  }
}

@mixin children(
  $grey-selector,
  $white-selector,
  $yellow-selector,
  $green-selector,
  $drop-shadow-selector,
  $border-selector,
  $has-counter-selector,
  $step-counter-selector
) {
  &:not(#{$white-selector}, #{$yellow-selector}, #{$border-selector}, #{$green-selector}) {
    @include set-colors.apply(colors.$grijs-5, "highlight-box");
  }

  &#{$grey-selector} {
    @include set-colors.apply(colors.$grijs-5, "highlight-box");
  }

  &#{$white-selector} {
    @include set-colors.apply(colors.$wit, "highlight-box");
  }

  &#{$yellow-selector} {
    @include set-colors.apply(colors.$geel-20, "highlight-box");
  }

  &#{$green-selector} {
    @include set-colors.apply(colors.$grasgroen-10, "highlight-box");
  }

  &#{$drop-shadow-selector} {
    box-shadow: highlight-box-variables.$box-shadow;
  }

  &#{$border-selector} {
    border: 1px solid colors.$grijs-20;
    padding: #{units.$u2 - 1};
  }

  &#{$border-selector}:not(#{$grey-selector}, #{$yellow-selector}) {
    @include set-colors.apply(colors.$wit, "highlight-box");

    border-color: colors.$grijs-20;
  }

  &#{$has-counter-selector} {
    margin-block-start: highlight-box-variables.$margin-block-start;

    @include step-counter.has-step-counter();
  }

  > .dso-highlight-box-banner {
    aspect-ratio: 2.38 / 1;
    margin-inline-start: units.$u2 * -1;
    margin-inline-end: units.$u2 * -1;
    margin-block-start: units.$u2 * -1;
    object-fit: cover;
    inline-size: calc(100% + #{units.$u4});
    max-inline-size: unset;

    @container (min-width: 360px) and (max-width: 470px) {
      aspect-ratio: 3 / 1;
    }

    @container (min-width: 471px) {
      aspect-ratio: 3.5 / 1;
    }
  }

  > #{$step-counter-selector} + .dso-rich-content,
  > .dso-rich-content:first-child {
    *:first-child {
      margin-block-start: 0 !important;
    }
  }

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

  .dso-tertiary:not([disabled]) {
    &:hover {
      &,
      dso-icon {
        text-decoration: underline;
      }
    }
  }

  &:not(#{$border-selector}):not(#{$white-selector}) .dso-button-row .dso-tertiary {
    &.extern::after {
      @include di.variant("external-link-zwart");
    }

    &.download::after {
      @include di.variant("download-zwart");
    }
  }
}

@mixin exoticChildren() {
  .dso-tertiary:not([disabled]) {
    color: colors.$zwart;
  }
}