@use "sass:map";
@use "sass:list";

@use "./functions.scss" as *;
@use "./prefix-list.scss" as *;

$elementDragging: "[data-cms-new-element-dragging-v2='true']";
$dataResizerTrue: '[data-cms-element-resizer="true"]';
$activeElementSelector: "[data-has-clicked='true']";
$editor: '[data-page-id="cms__template__editor"]';
$var: "--_sf-width-rsp-psn";

@function convertListToCommaSeparateString($list) {
  $items: ();
  @each $key, $value in $list {
    $sl: ".#{$value}";
    $items: list.append($items, $sl, comma);
  }

  @return $items;
}

$position: (
  class: (
    absolute: "flx-abs",
    fixed: "flx-fxd",
    sticky: "flx-stk",
    relative: "flx-rel",
  ),
  zIndex: "--_ctm-flex-z-index",
  attributes: (
    horizontal: "data-position-horizonal",
    vertical: "data-position-vertical",
  ),
  data: (
    horizontal: (
      right: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
      left: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
    ),
    vertical: (
      top: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
      bottom: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
    ),
  ),
);

@mixin FlexPositionModuleStyles() {
  $cls: map.get($position, class);
  $zIndex: map.get($position, zIndex);
  $attributes: map.get($position, attributes);
  $data: map.get($position, data);
  $pa: map.get($cls, absolute);
  $pr: map.get($cls, relative);

  :is(#{convertListToCommaSeparateString($cls)}) {
    @each $key, $value in $data {
      @each $key1, $value1 in $value {
        &[#{map.get($attributes, $key)}="#{$key1}"] {
          #{$key1}: #{$value1};
        }
      }
    }
    // @if(){

    // }
    // z-index: var(#{$zIndex});
    &:is(.#{$pr}, .#{pa}) {
      &:is(#{$editor} *) {
        &#{$activeElementSelector} {
          z-index: var(#{$zIndex});
        }
      }
      &:not(#{$editor} *) {
        z-index: var(#{$zIndex});
      }
    }
    &:not(.#{$pr}, .#{pa}) {
      z-index: var(#{$zIndex});
    }
    @each $key, $value in $cls {
      &.#{$value} {
        &:is(:not(#{$elementDragging}, #{$dataResizerTrue})) {
          position: var(--_p-#{$key}) !important;
          @if ($key == fixed) {
            @include FlexUpdatedPrefixCSSVariable($var);
            width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
          }
          @if not list.index((sticky, relative), $key) {
            margin: 0px !important;
          }
        }
      }
    }
  }
}