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

@mixin cxb-overlay($name, $besm) {
   $state: map.get($besm, state);

   left: calc(50% - 250px); //guess
   top: calc(50% - 100px); //guess
   min-width: 10px;
   min-height: 10px;
   position: fixed;
   overflow: visible;
   box-sizing: border-box;

   &.#{$state}draggable {
      cursor: pointer;
      touch-action: none;
   }

   &.#{$state}shadow {
      position: absolute;
   }

   &:focus {
      outline: none;
   }
}

@mixin cxe-overlay-modal-backdrop {
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
}

@mixin cxe-overlay-shadow {
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(128, 128, 128, 0.3);
   overflow: auto;
}

@mixin cxe-overlay-beacon {
   position: absolute;
   display: none;
}

@mixin cx-overlay($name: "overlay", $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);

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

   .#{$element}#{$name}-modal-backdrop {
      @include cxe-overlay-modal-backdrop;
   }

   .#{$element}#{$name}-shadow {
      @include cxe-overlay-shadow;
   }

   .#{$element}#{$name}-beacon {
      @include cxe-overlay-beacon;
   }
}

@if (cx-should-include("cx/widgets/Overlay")) {
   @include cx-overlay();
}