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

$selector: ".repeater__view__toggle";
$wrapper: ".tgl__wrapper";

@mixin FlexRepeaterGridToggleCSS() {
  #{$selector} {
    position: var(--_p-absolute);
    z-index: calc(var(--_higher-zIndex, 99999) - 2);
    left: var(--_sf-rp-gt-t3-left-vl, 0px);
    right: var(--_sf-rp-gt-t3-right-vl, auto);
    bottom: var(--_sf-rp-gt-t3-bottom-vl, auto);
    top: var(--_sf-rp-gt-t3-top-vl, 0px);

    & > div {
      &#{$wrapper} {
        display: var(--_d-flex);
        align-items: center;
        // border: 1px solid var(--_gray-200);
        // Gated on the Layout Style > Show Border switch; previously the border was
        // unconditional, so turning the switch off changed nothing.
        &[data-show-border="true"] {
          border-style: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-se, solid);
          border-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
          border-color: prepareMediaVariable(
            --_ctm-rep-dn-gd-vw-cl-se-lt-se-br-cr,
            var(--_gray-200)
          );
        }
        --_br-6: 6px;
        --_width-40: 40px;
        --_width-20: 20px;
        border-radius: 4px;
        // --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr,
        background-color: prepareMediaVariable(
          --_ctm-rep-dn-gd-vw-cl-se-lt-se-bd-cr,
          var(--_base-white)
        );

        & > button {
          display: var(--_d-flex);
          // $size: var(--_width-40);
          $size: #{var(
              --_sf-at-btn-size,
              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
            )};
          width: var(
            --_sf-at-btn-wh,
            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-wh, calc(#{$size} * 2))}
          );
          height: calc(#{$size} * 2);
          align-items: center;
          justify-content: center;
          background: var(
            --_sf-at-btn-bd,
            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
          );

          padding: var(
            --_sf-at-btn-pg,
            #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-pg, 0px)}
          );

          // Border / radius / shadow now come from the button's own settings. The
          // first/last radius overrides below only apply while no radius is configured,
          // so the default pill shape survives an unconfigured toggle.
          &[data-show-border="true"] {
            border-color: var(
              --_sf-at-btn-br-cr,
              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-cr)}
            );
            border-style: var(
              --_sf-at-btn-br-se,
              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-se)}
            );
            border-width: var(
              --_sf-at-btn-br-wh,
              #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-wh)}
            );
          }

          // Show Shadow / Show Icon are per-state switches on the Button accordion; they
          // reach the markup as data attributes and gate the two variables below.
          &[data-show-shadow="false"] {
            --_show-shadow: none;
          }
          &[data-show-icon="false"] {
            --_show-icon: none;
          }

          box-shadow: var(
            --_show-shadow,
            var(
                --_sf-at-btn-sw-ae,
                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-ae, 0)}
              )
              var(
                --_sf-at-btn-sw-br,
                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-br, 0)}
              )
              var(
                --_sf-at-btn-sw-sd,
                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-sd, 0)}
              )
              var(
                --_sf-at-btn-sw-cr,
                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-sw-cr, transparent)}
              )
          );

          // Radius falls back to the pill geometry these two buttons have always had.
          // It is NOT routed through an --_sf-at-btn-* variable: prepareMediaVariable
          // tails with `inherit`, so the variable would always be "set" and the
          // per-position fallback below would never fire, collapsing the pill to 0.
          &:first-of-type {
            border-radius: #{prepareMediaVariable(
                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
                4px 0 0 4px
              )};
          }
          &:last-of-type {
            border-radius: #{prepareMediaVariable(
                --_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-br-rs,
                0 4px 4px 0
              )};
          }

          // Hover sits between default and selected: it overrides the same
          // `--_sf-at-btn-*` layer, and the `[data-style-active="true"]` block below
          // comes later in source order, so the selected button keeps its own styling
          // while hovered rather than flipping to the hover look.
          &:hover {
            --_sf-at-btn-size: #{prepareMediaVariable(
                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-se,
                var(--_width-20)
              )};
            --_sf-at-pt-cl: #{prepareMediaVariable(
                --_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-in-c1,
                var(--_gray-700)
              )};
            --_sf-at-btn-bd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-bd-cr)};
            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-cr)};
            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-se)};
            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-br-wh)};
            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-ae)};
            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-br)};
            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-sd)};
            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-sw-cr)};
            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-wh)};
            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-hr-se-pg)};
          }

          &[data-style-active="true"] {
            // --_sf-at-pt-cl: var(--_gray-700);
            --_sf-at-btn-size: #{prepareMediaVariable(
                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-se,
                var(--_width-20)
              )};
            --_sf-at-pt-cl: #{prepareMediaVariable(
                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-in-c1,
                var(--_gray-700)
              )};
            --_sf-at-btn-bd: #{prepareMediaVariable(
                --_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
                var(--_gray-200)
              )};
            // background: var(--_gray-200);

            // Selected state overrides the same properties via the --_sf-at-btn-* layer
            // the default declarations above already read from.
            --_sf-at-btn-br-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-cr)};
            --_sf-at-btn-br-se: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-se)};
            --_sf-at-btn-br-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-br-wh)};
            --_sf-at-btn-sw-ae: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-ae)};
            --_sf-at-btn-sw-br: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-br)};
            --_sf-at-btn-sw-sd: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-sd)};
            --_sf-at-btn-sw-cr: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-sw-cr)};
            --_sf-at-btn-wh: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-wh)};
            --_sf-at-btn-pg: #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-sd-se-pg)};
          }

          // `img` covers custom uploaded toggle icons, which render as an <img>.
          svg,
          img {
            display: var(--_show-icon, block);
            width: calc(#{$size} * 1);
            height: calc(#{$size} * 1);
          }

          svg {
            path {
              stroke: var(
                --_sf-at-pt-cl,
                #{prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
              );
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-rep-dn-gd-vw-cl-se-bn-dt-se-se-wh, 1.25);
            }
          }
        }
      }
    }
  }
}