@mixin cx-overlay($name: "overlay", $besm: $cx-besm) {
   $block: map-get($besm, block);
   $element: map-get($besm, element);
   $state: map-get($besm, state);

   %cxb-overlay {
      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;
      }
   }

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

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

   .#{$block}#{$name} {
      @extend %cxb-overlay;

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

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

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

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