@use "../../di";
@use "../../variables/units";
@use "../../variables/zindex";

@use "../dropdown-menu";

@mixin icons() {
  > .dso-primary {
    &::after {
      @include di.base("chevron-down-wit");
    }
  }

  > .dso-secondary {
    &::after {
      @include di.base("chevron-down");
    }

    &:active {
      &::after {
        @include di.variant("chevron-down-wit");
      }
    }
  }

  > button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),
  > .dso-tertiary {
    &::after {
      @include di.base("chevron-down");

      margin-inline-start: units.$u1 * 0.5;
      position: relative;
      inset-block-start: -2px;
    }

    &:hover {
      &::after {
        @include di.variant("chevron-down-scampi");
      }
    }
  }
}

@mixin icons-open() {
  > .dso-primary {
    &::after {
      @include di.variant("chevron-up-wit");
    }
  }

  > .dso-secondary {
    &::after {
      @include di.variant("chevron-up");
    }

    &:active::after {
      @include di.variant("chevron-up-wit");
    }
  }

  > button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),
  > .dso-tertiary {
    &::after {
      @include di.variant("chevron-up");
    }

    &:hover::after {
      @include di.variant("chevron-up-scampi");
    }
  }
}

// HTML/CSS
.dso-dropdown-menu {
  @include dropdown-menu.root();
  @include dropdown-menu.children();
  @include icons();

  position: relative;

  &.dso-open {
    @include icons-open();
  }

  &.dso-checkable {
    @include dropdown-menu.checkable();

    li {
      &.dso-checked {
        a,
        button {
          &::before {
            @include di.base("check-wit", units.$u3);

            content: "";
            display: block;
            float: inline-start;
            margin-inline-start: units.$u4 * -1;
            margin-inline-end: units.$u1;
          }
        }
      }
    }
  }

  &.dso-dropdown-align-right {
    .dso-dropdown-options {
      inset-inline-end: 0;
    }
  }

  .dso-dropdown-options {
    margin-block: 2px 0;
    margin-inline: 0;
    position: absolute;
    text-align: start;
    inset-block-start: 100%;
  }
}

// Web Component
dso-dropdown-menu {
  @include dropdown-menu.children();
  @include icons();

  &[open] {
    @include icons-open();
  }

  &[checkable] {
    @include dropdown-menu.checkable();

    li {
      &.dso-checked {
        a,
        button {
          &::before {
            @include di.base("check-wit", units.$u3);

            content: "";
            display: block;
            float: inline-start;
            margin-inline-start: units.$u4 * -1;
            margin-inline-end: units.$u1;
          }
        }
      }
    }
  }
}