@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

@mixin CMSRepeaterEmblaControlStyles($type: 1) {
  @if ($type == 1) {
    &:is(body[data-iframe-body="true"] *),
    &:hover {
      --_sf-nv-ic-vt: visible;
      --_sf-nv-ic-op: 1;
    }
  }
  @include emblaBtnStylesV1($type);
  @include emblaDotsStylesV1($type);

  @if ($type == 2 or $type == 3) {
    &:is(body[data-iframe-body="true"] *),
    &:hover {
      --_sf-pg-ic-vt: visible;
      --_sf-pg-ic-op: 1;
    }
    .repeater__control__element {
      position: absolute;
      bottom: var(--_sf-t3-bt-bl-v2, 20px);
      left: var(--_sf-t3-lt-vl-v2, 50%);
      transform: var(--_sf-t3-tr-bl-v2, translateX(-50%));
      // z-index: calc(var(--_higher-zIndex, 99999) - 2);
      z-index: 2;
      @if ($type != 3) {
        visibility: var(--_sf-pg-ic-vt, hidden);
        opacity: var(--_sf-pg-ic-op, 0);
        transition: all 0.45s ease;
      } @else {
        // min-height: var(
        //   --_ctm-mob-rep-lt-aw-in-se,
        //   var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
        // );
        // Was `var(-_sf-ic-sz-nn)` — one dash short, so the declaration was dropped and
        // the type-3 control bar had no reserved height.
        min-height: var(--_sf-ic-sz-nn);
        --_sf-t3-lt-vl-v2: var(--_sf-rp-ct-t3-left-vl, 50%);
        --_sf-t3-bt-bl-v2: var(--_sf-rp-ct-t3-bottom-vl, 20px);
        --_sf-t3-tr-bl-v2: var(--_sf-rp-ct-t3-transform-vl, translateX(-50%));
        right: var(--_sf-rp-ct-t3-right-vl, auto);
        top: var(--_sf-rp-ct-t3-top-vl, auto);
      }

      display: flex;
      align-items: center;
      gap: 12px;
    }
  }
}

@mixin emblaBtnStylesV1($type: 1) {
  // Navigation
  button {
    &.embla__btn {
      @if ($type == 1) {
        position: absolute;
        // z-index: calc(var(--_higher-zIndex, 99999) - 2);
        z-index: 2;
        top: var(--_sf-nv-tp-vl, 50%);
        transform: translateY(-50%);
        visibility: var(--_sf-nv-ic-vt, hidden);
        opacity: var(--_sf-nv-ic-op, 0);
        transition: all 0.45s ease;
        &.embla__prev {
          left: var(--_sf-nv-lt-vl, 10px);
        }
        &.embla__next {
          right: var(--_sf-nv-lt-vl, 10px);
        }
      }
      // --_sf-ic-sz-nn: var(
      //   --_ctm-mob-rep-lt-aw-in-se,
      //   var(--_ctm-tab-rep-lt-aw-in-se, var(--_ctm-rep-lt-aw-in-se, 40px))
      // );
      width: var(--_sf-ic-sz-nn);
      // --_ctm-rep-lt-dt-se
      height: var(--_sf-ic-sz-nn);
      border-radius: var(--_sf-nv-ic-br, 50%);

      @if ($type == 3) {
        --_sf-dd-vl-bg-t3: transparent;
        &:is(body[data-iframe-body="true"] *) {
          pointer-events: none !important;
        }
      }
      background: var(--_sf-nv-ic-bg, var(--_sf-dd-vl-bg-t3, #fff));

      &:hover:not(:disabled) {
        // --_sf-nv-ic-bg: color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 10%, transparent);
        @include BgColorLighter(var(--_sf-sl-ct-ic-dt-at-cl), 10%);

        svg {
          path {
            stroke: var(--_sf-sl-ct-ic-dt-at-cl);
          }
        }
      }
      &:disabled {
        opacity: 0.45;
        cursor: auto;
      }

      // Custom (Sirv-hosted) arrow icons are fetched at runtime and land inside a
      // `.icon` span instead of directly on the button, so they need the same sizing
      // and stroke as the inlined built-in chevrons.
      & > svg,
      & > .icon > svg {
        width: calc(var(--_sf-ic-sz-nn) * 0.5);
        height: calc(var(--_sf-ic-sz-nn) * 0.5);
        display: flex;
        justify-content: center;
        align-items: center;

        // Overrides the stroke hardcoded in the chevron icon markup. Lower specificity
        // than the :hover rule above, so hover still wins with the active colour.
        path {
          stroke: var(--_sf-sl-ct-aw-in-cl, #667085);
        }
      }
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

@mixin emblaDotsStylesV1($type: 1) {
  :is(.pagination__v1) {
    @if ($type == 1) {
      position: absolute;
      // z-index: calc(var(--_higher-zIndex, 99999) - 2);
      z-index: 2;
      left: 50%;
      transform: translateX(-50%);
      bottom: var(--_sf-nv-tp-vl, 10px);
    }

    @if ($type == 3) {
      --_sf-dt-wh-t3: 16px;
      --_sf-dt-ht-t3: 2px;
      // --_sf-dt-br-t3: 100px;
      --_dt-in-active-color: #d6d6d6;
      --_sf-dt-gp-vl: 0px;

      &:is(body[data-iframe-body="true"] *) {
        pointer-events: none !important;
      }
    }

    display: flex;
    align-items: center;
    gap: var(--_sf-dt-gp-vl, 8px);
    max-width: 200px;

    & > button {
      &.embla__dot {
        // --_sf-ed-vl-sz: var(
        //   --_ctm-mob-rep-lt-dt-se,
        //   var(--_ctm-tab-rep-lt-dt-se, var(--_ctm-rep-lt-dt-se, 10px))
        // );
        @if ($type != 3) {
          transition: all 0.45s ease;
          width: var(--_sf-nv-pg-sz-ac, var(--_sf-ed-vl-sz, 10px));
          height: var(--_sf-ed-vl-sz, 10px);
          border-radius: var(--_sf-dt-bt-at, 50%);
          // Inactive dot fill. `--_sf-dt-ie-bg` is the per-element hook (the layouter
          // sets it from its Pagination Dots section); unset everywhere else, which
          // leaves the original default.
          background: var(--_sf-nv-pg-bg, var(--_sf-dt-ie-bg, #fff));

          &:not(.embla__dot--selected) {
            border: 1px solid color-mix(in srgb, var(--_sf-sl-ct-ic-dt-at-cl) 30%, transparent);
          }
        } @else if($type == 3) {
          width: var(--_sf-dt-at-wh-t3, var(--_sf-dt-wh-t3, 10px));
          height: var(--_sf-dt-at-ht-t3, var(--_sf-dt-ht-t3, 10px));
          border-radius: var(--_sf-dt-at-br-t3, var(--_sf-dt-bt-at, 0px));
          background: var(--_sf-nv-pg-bg, var(--_sf-dt-ie-bg, var(--_dt-in-active-color)));

          &:not(.embla__dot--selected) {
            --_sf-br-vl-t3: 16px;
            &:nth-of-type(1) {
              --_sf-dt-bt-at: var(--_sf-br-vl-t3) 0px 0px var(--_sf-br-vl-t3);
            }
            &:last-of-type {
              --_sf-dt-bt-at: 0px var(--_sf-br-vl-t3) var(--_sf-br-vl-t3) 0px;
            }
          }
        }

        &.embla__dot--selected {
          // Selected dot fill. `--_sf-dt-ae-bg` is the per-element hook; without it the
          // dot keeps following Control Active Color as before.
          --_sf-nv-pg-bg: var(--_sf-dt-ae-bg, var(--_sf-sl-ct-ic-dt-at-cl, #162578));
          --_sf-dt-bt-at: min(calc(var(--_sf-ed-vl-sz, 10px) * 0.5), 10px);
          --_sf-nv-pg-sz-ac: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);

          @if ($type == 3) {
            --_sf-dt-at-wh-t3: calc(2 * var(--_sf-dt-wh-t3));
            --_sf-dt-at-ht-t3: 6px;
            --_sf-dt-at-br-t3: var(--_sf-dt-at-ht-t3);
          }
        }
      }
    }
  }
}