@use "sass:map" as sass-map;
// ---------------------------------------------
// DROPDOWN - MIXINS
// ---------------------------------------------

@use "../../../styles/tokens/base";
@use "../../../styles/tokens/space";
@use "../../../styles/tools/convert";
@use "../../../styles/tools/generate";
@use "../../../styles/tokens/color";
@use "../../../styles/tools/map";
@use "./config";

@mixin dropdown-menu($dropdown-menu: config.$dropdown-menu) {
  @include generate.css-map($dropdown-menu, "default");

  z-index: -1;
  position: absolute;
  display: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
}

@mixin visible {
  display: block;
  opacity: 1;
  z-index: 1000;
}

@mixin close {
  position: relative;
  margin: 0 !important;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@mixin button {
  position: relative;
  margin-right: 0 !important;
}

@mixin dropdown-spacing {
  padding: config.$space;
}

@mixin dropdown-item($dropdown-menu-item: config.$dropdown-menu-item) {
  display: block;
  cursor: default;

  &:hover,
  &:focus,
  &.is-active {
    @each $prop, $value in sass-map.get($dropdown-menu-item, "active") {
      #{$prop}: #{$value};
    }
  }

  @include base.focusring-flush;

  &[disabled],
  &[aria-disabled="true"] {
    pointer-events: none;
    color: var(--color-surface-moderate);
  }

  @each $prop, $value in sass-map.get($dropdown-menu-item, "default") {
    #{$prop}: #{$value};
  }
}

@mixin divider {
  @include generate.css-map(config.$divider);
}