@use "sass:math";
@use "sass:map";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "./Overlay.scss" as *;

@mixin cx-dropdown-arrow-shadow($name, $element, $shadow-color, $shadow-size, $dx, $dy) {
   @if ($shadow-color) {
      & > .#{$element}#{$name}-arrow-border {
         filter: drop-shadow(#{$dx} #{$dy} #{$shadow-size} $shadow-color);
      }
   }
}

@mixin cx-dropdown-arrows(
   $name: "dropdown",
   $styles: $cx-dropdown-styles,
   $arrow-size: $cx-default-dropdown-arrow-size,
   $arrow-shadow-color: $cx-default-dropdown-arrow-shadow-color,
   $arrow-shadow-size: $cx-default-dropdown-arrow-shadow-size,
   $arrow-shadow-offset: $cx-default-dropdown-arrow-shadow-offset,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);

   $border-width: map.get($styles, border-width);

   .#{$element}#{$name}-arrow-border,
   .#{$element}#{$name}-arrow-fill {
      border-style: solid;
      border-color: transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
   }

   .#{$element}#{$name}-arrow-border {
      color: map.get($styles, border-color);
      border-width: cx-calc($border-width, $arrow-size);
   }

   .#{$element}#{$name}-arrow-fill {
      color: map.get($styles, background-color);
      border-width: $arrow-size;
   }

   .#{$state}place-right,
   .#{$state}place-right-up,
   .#{$state}place-right-down {
      & > .#{$element}#{$name}-arrow-fill {
         right: 100%;
         top: 50%;
         border-right-color: currentColor;
         margin-top: cx-multiply($arrow-size, -1);
      }

      & > .#{$element}#{$name}-arrow-border {
         right: 100%;
         top: 50%;
         border-right-color: currentColor;
         margin-top: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
      }

      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, cx-multiply($arrow-shadow-offset, -1), 0);
   }

   .#{$state}place-left,
   .#{$state}place-left-down,
   .#{$state}place-left-up {
      & > .#{$element}#{$name}-arrow-fill {
         left: 100%;
         top: 50%;
         border-left-color: currentColor;
         margin-top: cx-multiply($arrow-size, -1);
      }

      & > .#{$element}#{$name}-arrow-border {
         left: 100%;
         top: 50%;
         border-left-color: currentColor;
         margin-top: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
      }

      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, $arrow-shadow-offset, 0);
   }

   .#{$state}place-right-down,
   .#{$state}place-left-down {
      & > .#{$element}#{$name}-arrow-fill {
         top: var(--cx-scss-dropdown-arrow-offset);
      }

      & > .#{$element}#{$name}-arrow-border {
         top: var(--cx-scss-dropdown-arrow-offset);
      }
   }

   .#{$state}place-right-up,
   .#{$state}place-left-up {
      & > .#{$element}#{$name}-arrow-fill,
      & > .#{$element}#{$name}-arrow-border {
         top: calc(100% - var(--cx-scss-dropdown-arrow-offset));
      }
   }

   .#{$state}place-up,
   .#{$state}place-up-left,
   .#{$state}place-up-right {
      & > .#{$element}#{$name}-arrow-fill {
         left: 50%;
         top: 100%;
         border-top-color: currentColor;
         margin-left: cx-multiply($arrow-size, -1);
      }

      & > .#{$element}#{$name}-arrow-border {
         left: 50%;
         top: 100%;
         border-top-color: currentColor;
         margin-left: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
      }

      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, 0, $arrow-shadow-offset);
   }

   .#{$state}place-down,
   .#{$state}place-down-left,
   .#{$state}place-down-right {
      & > .#{$element}#{$name}-arrow-fill {
         left: 50%;
         bottom: 100%;
         border-bottom-color: currentColor;
         margin-left: cx-multiply($arrow-size, -1);
      }

      & > .#{$element}#{$name}-arrow-border {
         left: 50%;
         bottom: 100%;
         border-bottom-color: currentColor;
         margin-left: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
      }

      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, 0, cx-multiply($arrow-shadow-offset, -1));
   }

   .#{$state}place-down-right,
   .#{$state}place-up-right {
      & > .#{$element}#{$name}-arrow-fill,
      & > .#{$element}#{$name}-arrow-border {
         left: var(--cx-scss-dropdown-arrow-offset);
      }
   }

   .#{$state}place-down-left,
   .#{$state}place-up-left {
      & > .#{$element}#{$name}-arrow-fill {
         left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
      }

      & > .#{$element}#{$name}-arrow-border {
         left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
      }
   }
}

@mixin cx-dropdown(
   $name: "dropdown",
   $styles: $cx-dropdown-styles,
   $arrow-size: $cx-default-dropdown-arrow-size,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);

   .#{$block}#{$name} {
      @include cxb-overlay($name, $besm);
      display: block;
      left: -10000px;
      top: -10000px;
      --cx-scss-dropdown-arrow-offset: var(--cx-js-dropdown-arrow-offset, #{$cx-default-dropdown-arrow-offset});

      @include cx-add-rules($styles);

      &.#{$state}place-screen-center {
         box-shadow:
            0 0 10px 1px rgba(0, 0, 0, 0.29),
            0 0 1000px 1000px rgba(128, 128, 128, 0.3);
      }

      &.#{$state}pad {
         padding: $cx-default-dropdown-padding;
      }
   }

   .#{$element}#{$name}-beacon {
      position: absolute;
      width: 1px;
      height: 1px;
      visibility: hidden;
   }

   @include cx-dropdown-arrows($name, $styles, $arrow-size, $besm: $besm);

}

@if (cx-should-include("cx/widgets/Dropdown")) {
   @include cx-dropdown();
}