@use "../highlight-box";
@use "../link-list";
@use "../step-counter";

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

// HTML/CSS
.dso-highlight-box {
  @include highlight-box.root();
  @include highlight-box.children(
    $grey-selector: ".dso-grey",
    $white-selector: ".dso-white",
    $yellow-selector: ".dso-yellow",
    $green-selector: ".dso-green",
    $drop-shadow-selector: ".dso-drop-shadow",
    $border-selector: ".dso-border",
    $has-counter-selector: ".dso-has-counter",
    $step-counter-selector: ".dso-step-counter:first-child"
  );

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

  container-type: inline-size;
  position: relative;
  z-index: 1;

  &.dso-yellow,
  &:not(.dso-border):not(.dso-white) {
    @include highlight-box.exoticChildren();
  }

  .dso-step-counter > dso-icon {
    @include step-counter.icon();
  }

  &:not(.dso-border):not(.dso-white) {
    .dso-link-list {
      @include link-list.exotic();

      a {
        &,
        &:active,
        &:focus,
        &:hover {
          &::before {
            @include di.base("chevron-right-zwart");
          }
        }

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

        &.extern {
          @include di.variant("external-link-zwart");
        }
      }
    }
  }
}

// Web Component
dso-highlight-box {
  @include highlight-box.children(
    $grey-selector: "[grey]",
    $white-selector: "[white]",
    $yellow-selector: "[yellow]",
    $green-selector: "[green]",
    $drop-shadow-selector: "[drop-shadow]",
    $border-selector: "[border]",
    $has-counter-selector: "[has-counter]",
    $step-counter-selector: '[slot="icon"]:first-child'
  );

  dso-icon[slot="icon"] {
    @include step-counter.icon();
  }

  &[yellow],
  &:not([border]):not([white]) {
    @include highlight-box.exoticChildren();
  }

  &:not([border]):not([white]) {
    .dso-link-list {
      @include link-list.exotic();

      a {
        &,
        &:active,
        &:focus,
        &:hover {
          &::before {
            @include di.base("chevron-right-zwart");
          }
        }

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

        &.extern {
          @include di.variant("external-link-zwart");
        }
      }
    }
  }
}