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

// $breakPoints: (
//   desktop: (
//     min: 1024px,
//     max: 99999px,
//   ),
//   mobile: (
//     min: 100px,
//     max: 1023px,
//   ),
//   laptop: (
//     min: 1024px,
//     max: 1367px,
//   ),
//   small: (
//     min: 50px,
//     max: 399px,
//   ),
// );

$breakPointsV2: (
  desktop: (
    min: 768px,
    // ---> 1024px
    max: 99999px,
  ),
  mobile: (
    min: 10px,
    max: 767px,
  ),
  laptop: (
    min: 768px,
    max: 1023px,
  ),
);
$breakPointsV3: (
  desktop: (
    min: 1024px,
    // ---> 1024px
    max: 99999px,
  ),
  mobile: (
    min: 10px,
    max: 767px,
  ),
  laptop: (
    min: 768px,
    max: 1023px,
  ),
);

@function safe-map-get($map, $key) {
  @if $map != null and meta.type-of($map) == "map" and map.has-key($map, $key) {
    @return map.get($map, $key);
  }
  @return null;
}

@mixin prepareMediaQueries($list) {
  @each $mediaKey, $mediaValue in $breakPointsV2 {
    $maxWidth: safe-map-get($mediaValue, max);
    $minWidth: safe-map-get($mediaValue, min);
    @if $maxWidth != null and $minWidth != null {
      @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
        @each $key, $value in $list {
          $value1: safe-map-get($value, $mediaKey);
          @if $value1 != null {
            #{$key}: $value1;
          }
        }
      }
    }
  }
}

@mixin restrictToLinesShow($count, $type: "optional") {
  display: -webkit-box;
  -webkit-line-clamp: $count;
  overflow: clip;
  text-overflow: ellipsis;
  @if ($type == "optional") {
    -webkit-box-orient: vertical;
  } @else {
    -webkit-box-orient: $type;
  }
}

@mixin restrictToLine($count, $type: "optional") {
  display: -webkit-box !important;
  -webkit-line-clamp: $count;
  overflow: clip;
  text-overflow: ellipsis;
  white-space: normal;
  @if ($type == "optional") {
    -webkit-box-orient: vertical;
  } @else {
    -webkit-box-orient: $type;
  }
}

@function getListOfResponsive($desktop, $mobile, $laptop: "optional") {
  $list: (
    desktop: $desktop,
    mobile: $mobile,
  );
  @if ($laptop != "optional") {
    $list: map.merge(
      $list,
      (
        laptop: $laptop,
      )
    );
  } @else {
    $list: map.merge(
      $list,
      (
        laptop: $desktop,
      )
    );
  }
  @return $list;
}

@function getTranstionValue($property, $duration: "normal") {
  $dur: var(--_anim-duration);
  @if ($duration == "slow") {
    $dur: var(--_anim-duration-slow);
  }
  @return $property #{$dur} var(--_anim-timing-function-v4);
}

@function getRepeatColWidth($colcount, $colgap) {
  @return repeat(
    var($colcount),
    calc((100% / var($colcount)) - (((var($colcount) - 1) * (var($colgap))) / (var($colcount))))
  );
}

@function getCommonHasNavContainer() {
  $css: ();
  $props: (
    display: var(--_d-flex),
    flex-wrap: wrap,
    justify-content: space-between,
    gap: var(--_default-row-gap) var(--_default-col-gap),
  );
  $css: map.merge($css, $props);
  @return $css;
}

@mixin prepareCustomClassCSSProps($props) {
  @each $key, $value in $props {
    @if ($key == class) {
      @each $classKey, $classValue in $value {
        .#{$classKey} {
          @each $key1, $value1 in $classValue {
            @if ($key1 == common) {
              @each $key2, $value2 in $value1 {
                #{$key2}: #{$value2};
              }
            } @else {
              $mediaValue: safe-map-get($breakPointsV2, $key1);
              $maxWidth: safe-map-get($mediaValue, max);
              $minWidth: safe-map-get($mediaValue, min);
              // @media only screen and (max-width: #{map.get(map.get($breakPointsV2, $key1), max)}) and (min-width: #{map.get(map.get($breakPointsV2, $key1), min)}) {
              //   @each $key2, $value2 in $value1 {
              //     #{$key2}: #{$value2};
              //   }
              // }
              @if $maxWidth != null and $minWidth != null {
                @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
                  @each $key2, $value2 in $value1 {
                    #{$key2}: #{$value2};
                  }
                }
              }
            }
          }
          // @include getcssprops($classValue, $breakPoints);
        }
      }
    } @else {
      #{$key} {
        @each $key1, $value1 in $value {
          @if ($key1 == common) {
            @each $key2, $value2 in $value1 {
              #{$key2}: #{$value2};
            }
          } @else {
            // @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
            //   @each $key2, $value2 in $value1 {
            //     #{$key2}: #{$value2};
            //   }
            // }
            $mediaValue: safe-map-get($breakPointsV2, $key1);
            $maxWidth: safe-map-get($mediaValue, max);
            $minWidth: safe-map-get($mediaValue, min);
            @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
              @each $key2, $value2 in $value1 {
                #{$key2}: #{$value2};
              }
            }
          }
          // @include getcssprops($value, $breakPoints);
        }
      }
    }
  }
}

@mixin prepareCustomClassCSSPropsV2($props) {
  @each $key, $value in $props {
    @if ($key == class) {
      @each $classKey, $classValue in $value {
        .#{$classKey} {
          @each $key1, $value1 in $classValue {
            @if ($key1 == common) {
              @each $key2, $value2 in $value1 {
                #{$key2}: #{$value2};
              }
            } @else {
              $mediaValue: safe-map-get($breakPointsV3, $key1);
              $maxWidth: safe-map-get($mediaValue, max);
              $minWidth: safe-map-get($mediaValue, min);
              // @media only screen and (max-width: #{map.get(map.get($breakPointsV2, $key1), max)}) and (min-width: #{map.get(map.get($breakPointsV2, $key1), min)}) {
              //   @each $key2, $value2 in $value1 {
              //     #{$key2}: #{$value2};
              //   }
              // }
              @if $maxWidth != null and $minWidth != null {
                @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
                  @each $key2, $value2 in $value1 {
                    #{$key2}: #{$value2};
                  }
                }
              }
            }
          }
          // @include getcssprops($classValue, $breakPoints);
        }
      }
    } @else {
      #{$key} {
        @each $key1, $value1 in $value {
          @if ($key1 == common) {
            @each $key2, $value2 in $value1 {
              #{$key2}: #{$value2};
            }
          } @else {
            // @media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
            //   @each $key2, $value2 in $value1 {
            //     #{$key2}: #{$value2};
            //   }
            // }
            $mediaValue: safe-map-get($breakPointsV3, $key1);
            $maxWidth: safe-map-get($mediaValue, max);
            $minWidth: safe-map-get($mediaValue, min);
            @media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
              @each $key2, $value2 in $value1 {
                #{$key2}: #{$value2};
              }
            }
          }
          // @include getcssprops($value, $breakPoints);
        }
      }
    }
  }
}

@function prepareMediaVariable($full-var, $common: inherit) {
  $prefix: "--_ctm-";
  $core-name: string.slice($full-var, string.length($prefix) + 1); // removes --_ctm-

  $default-var: var(#{$full-var}, #{$common});
  $tab-var: var(#{$prefix}tab-#{$core-name}, #{$default-var});
  $mob-var: var(#{$prefix}mob-#{$core-name}, #{$tab-var});
  @return $mob-var;
}

// Widget dividers are absolutely positioned pseudo-elements living in the gap between
// two items, so they take up no space of their own: a divider thicker than half the item
// spacing used to grow back over the text beside it. `dividerGapOffset` pushes the
// divider past the item edge by its own weight and `dividerGapReserve` hands that weight
// back to the item as margin, which keeps the whole divider inside the gap at any weight
// with half the item spacing clear either side.
//
// Pair them: the offset alone would leave the divider hanging in the next item's space,
// the reserve alone would just widen the gap. Both take either a `--_ctm-*` variable name
// (resolved across breakpoints by `prepareMediaVariable`) or a ready CSS value such as
// `var(--_sf-dr-wt)` or `8px`.

// `0px` rather than `prepareMediaVariable`'s usual `inherit`: an unset weight has to stay
// a valid length or it would take the whole `calc()` — and with it the divider's
// position — down with it.
@function dividerLength($value) {
  @if meta.type-of($value) == "string" and string.slice($value, 1, 2) == "--" {
    @return prepareMediaVariable($value, 0px);
  }
  @return $value;
}

@function dividerGapOffset($spacing, $weight) {
  @return calc(-1 * (#{dividerLength($spacing)} / 2) - #{dividerLength($weight)});
}

@mixin dividerGapReserve($weight, $side: bottom) {
  margin-#{$side}: dividerLength($weight);
}

// Some dividers carry a marker (circle / square / icon) centred on the rule. With the
// rule pushed out by its own weight, the marker's centre moves out with it by half that.
@function dividerMarkerOffset($spacing, $weight) {
  @return calc(-1 * (#{dividerLength($spacing)} / 2) - (#{dividerLength($weight)} / 2));
}

@mixin flexBorderRotationWithDashed($clr, $gap, $height) {
  --_clr-border: #{$clr};
  --_cid-page-cpn-box-br-width: #{$gap};
  --_cid-box-self-border-height: #{$height};
  --_self-border-width: var(--_cid-page-cpn-box-br-width);
  --_self-border-gap: calc(var(--_cid-page-cpn-box-br-width) * 2);
  --_self-border-height: var(--_cid-box-self-border-height);
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--_clr-border),
      var(--_clr-border) var(--_self-border-width),
      transparent var(--_self-border-width),
      transparent var(--_self-border-gap)
    ),
    repeating-linear-gradient(
      90deg,
      var(--_clr-border),
      var(--_clr-border) var(--_self-border-width),
      transparent var(--_self-border-width),
      transparent var(--_self-border-gap)
    ),
    repeating-linear-gradient(
      180deg,
      var(--_clr-border),
      var(--_clr-border) var(--_self-border-width),
      transparent var(--_self-border-width),
      transparent var(--_self-border-gap)
    ),
    repeating-linear-gradient(
      270deg,
      var(--_clr-border),
      var(--_clr-border) var(--_self-border-width),
      transparent var(--_self-border-width),
      transparent var(--_self-border-gap)
    );

  background-size:
    var(--_self-border-height) calc(100% + var(--_self-border-gap)),
    calc(100% + var(--_self-border-gap)) var(--_self-border-height),
    var(--_self-border-height) calc(100% + var(--_self-border-gap)),
    calc(100% + var(--_self-border-gap)) var(--_self-border-height);

  background-repeat: no-repeat;
  background-position:
    0 0,
    0 0,
    100% 0,
    0 100%;

  animation: boxBorderAnimation 1s infinite linear;

  @keyframes boxBorderAnimation {
    0% {
      background-position:
        0 0,
        calc(#{$gap} * -2) 0,
        100% calc(#{$gap} * -2),
        0 100%;
    }
    100% {
      background-position:
        0 calc(#{$gap} * -2),
        0 0,
        100% 0,
        calc(#{$gap} * -2) 100%;
    }
  }
}

@mixin scrollbarHoverMixin() {
  &::-webkit-scrollbar-thumb {
    background-color: var(--_sf-hr-bg, transparent);
  }

  &::-webkit-scrollbar-track {
    background: var(--_sf-hr-tr, transparent); /* Background color of the track */
  }

  &:hover {
    --_sf-hr-bg: var(--_primary-200);
    --_sf-hr-tr: var(--_white-v1);
  }
}

@mixin BgColorLighter($value, $percent: 10%) {
  background-color: color-mix(in srgb, #{$value} #{$percent}, transparent);
}