@use "sass:map";
@use "./functions.scss" as *;
@use "./prefix-list.scss" as *;
$var: "--_ctm-sf-or-mx-ht";
$overflow: (
  class: (
    scrollable: "flx-oflow",
  ),
  attributes: (
    vertical: "data-scroll-vertical",
    horizontal: "data-scroll-horizontal",
    maxHeight: "data-max-height",
    displayScrollbar: "data-scrollbar",
  ),
);

$overflowValues: (
  scroll: auto,
  hidden: hidden,
  visible: visible,
  // auto: auto,
   // clip: clip,
);

@mixin FlexOverflowModuleStyles() {
  $cls: map.get($overflow, class);
  $attrs: map.get($overflow, attributes);

  :is(.#{map.get($cls, scrollable)}) {
    // Loop through both directions
    @each $dir in (vertical, horizontal) {
      $prop: if($dir == vertical, overflow-y, overflow-x);
      $attr: map.get($attrs, $dir);

      // For each possible overflow value (scroll, auto, hidden, etc.)
      @each $dataVal, $cssVal in $overflowValues {
        &[#{$attr}="#{$dataVal}"] {
          #{$prop}: #{$cssVal};
        }
      }
    }

    // Apply max-height if vertical is scroll and max-height is set
    &[#{map.get($attrs, vertical)}="scroll"] {
      &[#{map.get($attrs, maxHeight)}] {
        @include FlexUpdatedPrefixCSSVariable($var, false, maxHeight);
        max-height: var(#{$var}, 100%) !important;
      }
    }

    // Scrollbar styles only if enabled
    &[#{map.get($attrs, displayScrollbar)}="true"] {
      &::-webkit-scrollbar {
        width: var(--cms-scrollbar-width, 8px);
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--cms-scrollbar-thumb-color, rgba(0, 0, 0, 0.3));
        border-radius: var(--cms-scrollbar-radius, 4px);
      }
    }
  }
}