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

$dataTextPosition: "data-text-position";
$dataDividerOn: '[data-show-divider="true"]';

$handleDivider: (
  inline: (
    common: (
      top,
      height,
      Y,
      width,
    ),
    keys: (
      left: right,
      right: left,
    ),
  ),
  block: (
    common: (
      left,
      width,
      X,
      height,
    ),
    keys: (
      top: bottom,
      bottom: top,
    ),
  ),
);
@function getTransformValueV2($direction) {
  @return translate#{$direction }(-50%);
}
$dividerValues: (
  1: 50%,
  2: 100%,
  4: #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt)},
);

[data-div-type="element"] {
  &[data-element-type="countdown"] {
    // width: var(--_lt-wh);
    // height: var(--_lt-ht);
    // margin: var(--_lt-mn);
    // padding: var(--_lt-pg);
    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    // Size bounds for the whole countdown. 480px is the narrowest the widget lays out
    // cleanly — below it the counters and the title start fighting for the same space
    // — and 600px keeps it from stretching so wide that the two sit far apart. The
    // Width control still applies between the two.
    // min-width: 480px !important;
    min-width: 600px !important;
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% *
          var(
            --_ctm-mob-ele-nw-wh-vl,
            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
          )
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    // --_aspect-ratio: calc(
    //   1 *
    //     (
    //       var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
    //         var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
    //     )
    // );

    & > .wrapper {
      width: 100%;
      // overflow: clip;
      // height: 100%;
      &[data-widget-shadow="true"] {
        box-shadow: var(
            --_ctm-mob-dn-cn-wt-sw-ae,
            var(--_ctm-tab-dn-cn-wt-sw-ae, var(--_ctm-dn-cn-wt-sw-ae))
          )
          var(--_ctm-mob-dn-cn-wt-sw-br, var(--_ctm-tab-dn-cn-wt-sw-br, var(--_ctm-dn-cn-wt-sw-br)))
          var(--_ctm-mob-dn-cn-wt-sw-sd, var(--_ctm-tab-dn-cn-wt-sw-sd, var(--_ctm-dn-cn-wt-sw-sd)))
          var(--_ctm-mob-dn-cn-wt-sw-cr, var(--_ctm-tab-dn-cn-wt-sw-cr, var(--_ctm-dn-cn-wt-sw-cr)));
      }
    }
    &[data-text-container-border="true"] {
      .content__container {
        border-color: var(
          --_ctm-mob-dn-cn-wt-tt-cr-dn-br-cr,
          var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-cn-wt-tt-cr-dn-br-se,
          var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-se, var(--_ctm-dn-cn-wt-tt-cr-dn-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-cn-wt-tt-cr-dn-br-wh,
          var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-wh, var(--_ctm-dn-cn-wt-tt-cr-dn-br-wh))
        );
      }
    }
    &[data-text-container-shadow="true"] {
      .content__container {
        box-shadow: var(
            --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-ae,
            var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-ae))
          )
          var(
            --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-br,
            var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-br, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-br))
          )
          var(
            --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-sd,
            var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-sd))
          )
          var(
            --_ctm-mob-dn-cn-wt-tt-cr-dn-sw-cr,
            var(--_ctm-tab-dn-cn-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-sw-cr))
          );
      }
    }

    &[data-widget-border="true"] {
      .countdown__container {
        border-color: var(
          --_ctm-mob-dn-cn-wt-br-cr,
          var(--_ctm-tab-dn-cn-wt-br-cr, var(--_ctm-dn-cn-wt-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-cn-wt-br-se,
          var(--_ctm-tab-dn-cn-wt-br-se, var(--_ctm-dn-cn-wt-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-cn-wt-br-wh,
          var(--_ctm-tab-dn-cn-wt-br-wh, var(--_ctm-dn-cn-wt-br-wh))
        );
      }
    }

    &[data-counter-shadow="true"] {
      .countdown__element {
        box-shadow: var(
            --_ctm-mob-dn-cr-se-sw-ae,
            var(--_ctm-tab-dn-cr-se-sw-ae, var(--_ctm-dn-cr-se-sw-ae))
          )
          var(--_ctm-mob-dn-cr-se-sw-br, var(--_ctm-tab-dn-cr-se-sw-br, var(--_ctm-dn-cr-se-sw-br)))
          var(--_ctm-mob-dn-cr-se-sw-sd, var(--_ctm-tab-dn-cr-se-sw-sd, var(--_ctm-dn-cr-se-sw-sd)))
          var(--_ctm-mob-dn-cr-se-sw-cr, var(--_ctm-tab-dn-cr-se-sw-cr, var(--_ctm-dn-cr-se-sw-cr)));
      }
    }

    &[data-counter-border="true"] {
      .countdown__element {
        border-color: var(
          --_ctm-mob-dn-cr-se-br-cr,
          var(--_ctm-tab-dn-cr-se-br-cr, var(--_ctm-dn-cr-se-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-cr-se-br-se,
          var(--_ctm-tab-dn-cr-se-br-se, var(--_ctm-dn-cr-se-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-cr-se-br-wh,
          var(--_ctm-tab-dn-cr-se-br-wh, var(--_ctm-dn-cr-se-br-wh))
        );
      }
    }

    &[data-counter-type="joined"] {
      .countdown__element {
        background-color: var(
          --_ctm-mob-dn-cr-se-bd-cr,
          var(--_ctm-tab-dn-cr-se-bd-cr, var(--_ctm-dn-cr-se-bd-cr))
        );
      }
    }

    &[data-text-container-alignment="left"] {
      .content__container {
        align-items: flex-start;
      }
    }
    &[data-text-container-alignment="center"] {
      .content__container {
        align-items: center;
      }
    }
    &[data-text-container-alignment="right"] {
      .content__container {
        align-items: flex-end;
      }
    }
    &[data-text-position="top"] {
      .countdown__container {
        flex-direction: column;
      }
    }

    &[data-text-position="bottom"] {
      .countdown__container {
        flex-direction: column-reverse;
      }
    }
    &[data-text-position="left"] {
      .countdown__container {
        flex-direction: row;
      }
      &[data-widget-alignment="center"] {
        .countdown__container {
          align-items: center;
        }
      }
      &[data-widget-alignment="bottom"] {
        .countdown__container {
          align-items: flex-end;
        }
      }
      &[data-widget-alignment="top"] {
        .countdown__container {
          align-items: flex-start;
        }
      }
    }
    &[data-text-position="right"] {
      .countdown__container {
        flex-direction: row-reverse;
      }
      &[data-widget-alignment="center"] {
        .countdown__container {
          align-items: center;
        }
      }
      &[data-widget-alignment="bottom"] {
        .countdown__container {
          align-items: flex-end;
        }
      }
      &[data-widget-alignment="top"] {
        .countdown__container {
          align-items: flex-start;
        }
      }
    }

    &[data-counter-type="seperate"] {
      .countdown__element .countdown__digit-box {
        background-color: var(
          --_ctm-mob-dn-cr-se-bg-cr,
          var(--_ctm-tab-dn-cr-se-bg-cr, var(--_ctm-dn-cr-se-bg-cr))
        );
      }
    }

    &[data-countdown-animation="fadeIn"] {
      .animation:nth-child(2) {
        animation: fadeIn 1s infinite;
      }
    }

    &[data-countdown-animation="flip"] {
      .animation:nth-child(2) {
        display: inline-block;
        animation: flip 1s ease-in-out infinite;
        backface-visibility: hidden;
      }
    }

    .countdown__container {
      display: flex;
      // height: 100%;
      gap: var(
        --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
        var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
      );
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      background-color: var(
        --_ctm-mob-dn-cn-wt-bd-cr,
        var(--_ctm-tab-dn-cn-wt-bd-cr, var(--_ctm-dn-cn-wt-bd-cr))
      );
      border-radius: var(
        --_ctm-mob-dn-cn-wt-br-rs,
        var(--_ctm-tab-dn-cn-wt-br-rs, var(--_ctm-dn-cn-wt-br-rs))
      );

      &[data-show-divider="true"] {
        gap: calc(
          #{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg, 0px)} +
            #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)}
        );
      }

      .content__container {
        display: flex;
        flex-direction: column;
        position: relative;
        // Same reasoning as `.countdown`: without this the title's own width acts as a
        // floor, so the text column refuses to give ground and squeezes the counters
        // out of the widget instead of the two sharing what space there is.
        min-width: 0;

        background-color: var(
          --_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
          var(--_ctm-tab-dn-cn-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-cn-wt-tt-cr-dn-bd-cr))
        );

        border-radius: var(
          --_ctm-mob-dn-cn-wt-tt-cr-dn-br-rs,
          var(--_ctm-tab-dn-cn-wt-tt-cr-dn-br-rs, var(--_ctm-dn-cn-wt-tt-cr-dn-br-rs))
        );

        padding: var(
            --_ctm-mob-dn-cn-wt-tt-cr-lt-tt-vl-pg,
            var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-vl-pg))
          )
          var(
            --_ctm-mob-dn-cn-wt-tt-cr-lt-tt-hl-pg,
            var(--_ctm-tab-dn-cn-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-cn-wt-tt-cr-lt-tt-hl-pg))
          );

        gap: var(
          --_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
          var(--_ctm-tab-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg))
        );
        h1 {
          white-space: nowrap;
          // The title is deliberately kept on one line, so once the column is narrower
          // than the words it has to be cut off rather than bleed across the counters
          // beside it — which is what "SESSIO" running under the digits was.
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .content__container {
        display: flex;
        flex-direction: column;
        // Text Container Width, from the widget's text-container layout. 100% is what
        // was hardcoded here, so an untouched countdown is unchanged.
        width: prepareMediaVariable(--_ctm-dn-cn-wt-tt-cr-lt-tt-cr-wh, 100%);
        gap: #{prepareMediaVariable(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg)};

        h1 {
          color: var(--_ctm-mob-dn-cn-wt-cr, var(--_ctm-tab-dn-cn-wt-cr, var(--_ctm-dn-cn-wt-cr)));

          font-family: var(
            --_ctm-mob-dn-cn-wt-ft-fy,
            var(--_ctm-tab-dn-cn-wt-ft-fy, var(--_ctm-dn-cn-wt-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-cn-wt-tt-tm,
            var(--_ctm-tab-dn-cn-wt-tt-tm, var(--_ctm-dn-cn-wt-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-cn-wt-wd-wp,
            var(--_ctm-tab-dn-cn-wt-wd-wp, var(--_ctm-dn-cn-wt-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-cn-wt-wd-bk,
            var(--_ctm-tab-dn-cn-wt-wd-bk, var(--_ctm-dn-cn-wt-wd-bk))
          );

          font-size: var(
            --_ctm-mob-dn-cn-wt-ft-se,
            var(--_ctm-tab-dn-cn-wt-ft-se, var(--_ctm-dn-cn-wt-ft-se))
          );

          font-weight: var(
            --_ctm-mob-dn-cn-wt-ft-wt,
            var(--_ctm-tab-dn-cn-wt-ft-wt, var(--_ctm-dn-cn-wt-ft-wt))
          );

          font-style: var(
            --_ctm-mob-dn-cn-wt-ft-se-ic,
            var(--_ctm-tab-dn-cn-wt-ft-se-ic, var(--_ctm-dn-cn-wt-ft-se-ic))
          );

          text-align: var(
            --_ctm-mob-dn-cn-wt-tt-an,
            var(--_ctm-tab-dn-cn-wt-tt-an, var(--_ctm-dn-cn-wt-tt-an))
          );

          letter-spacing: var(
            --_ctm-mob-dn-cn-wt-lr-sg,
            var(--_ctm-tab-dn-cn-wt-lr-sg, var(--_ctm-dn-cn-wt-lr-sg))
          );

          line-height: var(
            --_ctm-mob-dn-cn-wt-le-ht,
            var(--_ctm-tab-dn-cn-wt-le-ht, var(--_ctm-dn-cn-wt-le-ht))
          );

          text-decoration: var(
            --_ctm-mob-dn-cn-wt-ue,
            var(--_ctm-tab-dn-cn-wt-ue, var(--_ctm-dn-cn-wt-ue))
          );
        }

        p {
          color: var(
            --_ctm-mob-dn-cn-wt-cr-dc,
            var(--_ctm-tab-dn-cn-wt-cr-dc, var(--_ctm-dn-cn-wt-cr-dc))
          );

          font-family: var(
            --_ctm-mob-dn-cn-wt-ft-fy-dc,
            var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc))
          );
          text-transform: var(
            --_ctm-mob-dn-cn-wt-tt-tm-dc,
            var(--_ctm-tab-dn-cn-wt-tt-tm-dc, var(--_ctm-dn-cn-wt-tt-tm-dc))
          );
          word-wrap: var(
            --_ctm-mob-dn-cn-wt-wd-wp-dc,
            var(--_ctm-tab-dn-cn-wt-wd-wp-dc, var(--_ctm-dn-cn-wt-wd-wp-dc))
          );
          word-break: var(
            --_ctm-mob-dn-cn-wt-wd-bk-dc,
            var(--_ctm-tab-dn-cn-wt-wd-bk-dc, var(--_ctm-dn-cn-wt-wd-bk-dc))
          );

          font-size: var(
            --_ctm-mob-dn-cn-wt-ft-se-dc,
            var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc))
          );

          font-weight: var(
            --_ctm-mob-dn-cn-wt-ft-wt-dc,
            var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc))
          );

          font-style: var(
            --_ctm-mob-dn-cn-wt-ft-se-ic-dc,
            var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc))
          );

          text-align: var(
            --_ctm-mob-dn-cn-wt-tt-an-dc,
            var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc))
          );

          letter-spacing: var(
            --_ctm-mob-dn-cn-wt-lr-sg-dc,
            var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc))
          );

          line-height: var(
            --_ctm-mob-dn-cn-wt-le-ht-dc,
            var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc))
          );

          text-decoration: var(
            --_ctm-mob-dn-cn-wt-ue-dc,
            var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc))
          );
        }

        &::after {
          content: "";
          position: absolute;
          visibility: var(--_sfdd-sdsjf-vst, hidden);
          opacity: var(--_sfsfnk-dfj0df-op, 0);
          background-color: prepareMediaVariable(--_ctm-dn-cn-wt-dr-cr);
        }

        &:is(#{$dataDividerOn} > *) {
          --_sfdd-sdsjf-vst: visible;
          --_sfsfnk-dfj0df-op: 1;

          @each $k, $v in $handleDivider {
            $keys: map.get($v, "keys");
            $common: map.get($v, "common");
            @each $k1, $v1 in $keys {
              &:is([#{$dataTextPosition}="#{$k1}"] > *) {
                &::after {
                  // #{$v1}: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
                  #{$v1}: calc(
                    -1 *
                      (
                        calc(
                            #{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} +
                              #{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)}
                          ) *
                          0.5
                      ) -
                      (#{prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt, 0px)} * 0.5)
                  );
                  $index: 1;
                  @each $value in $common {
                    @if ($index == 3) {
                      transform: #{getTransformValueV2($value)};
                    } @else {
                      $vv: map.get($dividerValues, $index);
                      #{$value}: #{$vv};
                    }
                    $index: $index + 1;
                  }
                }
              }
            }
          }

          // &:is([#{$dataTextPosition}="left"] > *) {
          //   &::after {
          //     top: 50%;
          //     height: 100%;
          //     transform: translateY(-50%);
          //     right: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
          //     width: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
          //   }
          // }

          // &:is([#{$dataTextPosition}="right"] > *) {
          //   &::after {
          //     top: 50%;
          //     height: 100%;
          //     transform: translateY(-50%);
          //     left: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
          //     width: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
          //   }
          // }

          // &:is([#{$dataTextPosition}="bottom"] > *) {
          //   &::after {
          //     left: 50%;
          //     width: 100%;
          //     transform: translateX(-50%);
          //     top: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
          //     height: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
          //   }
          // }

          // &:is([#{$dataTextPosition}="top"] > *) {
          //   &::after {
          //     left: 50%;
          //     width: 100%;
          //     transform: translateX(-50%);
          //     bottom: calc(-1 * (#{prepareMediaVariable(--_ctm-dn-cn-lt-wt-tt-ad-im-sg)} / 2));
          //     height: prepareMediaVariable(--_ctm-dn-cn-wt-dr-wt); /* Divider thickness */
          //   }
          // }
        }
      }

      .countdown {
        position: relative;
        width: 100%;
        display: grid;
        grid-auto-flow: column;
        // Counters and dividers on one centre line. Grid items stretch by default, so
        // each column filled the row height and its contents settled wherever their own
        // box put them — which is why the dividers never lined up with the digits.
        align-items: center;
        // And centred along the row. Auto tracks absorb the widget's spare width, but
        // `.countdown__element` is `width: max-content`, so a counter cannot stretch
        // and was left sitting at the START of its track — while a divider, having no
        // width of its own, did stretch and centred its icon in the middle of its own
        // track. The two settled to different places, so a divider never landed
        // halfway between the counters either side of it.
        justify-items: center;
        column-gap: 4px;
        text-align: center;

        // No scrolling here: the element carries a 480px floor (see the min-width on
        // the root below), which is enough to lay the counters out in full, so there
        // is nothing to scroll to. The counters keep their natural minimum size and
        // the text column beside them gives way first.
        &[data-text-align="left"] {
          .countdown__element .countdown__digits {
            justify-content: flex-start;
          }
        }
        &[data-text-align="justify"] {
          .countdown__element .countdown__digits {
            justify-content: center;
          }
        }
        &[data-text-align="center"] {
          .countdown__element .countdown__digits {
            justify-content: center;
          }
        }
        &[data-text-align="right"] {
          .countdown__element .countdown__digits {
            justify-content: flex-end;
          }
        }
      }
      .countdown__element {
        border-radius: var(
          --_ctm-mob-dn-cr-se-br-rs,
          var(--_ctm-tab-dn-cr-se-br-rs, var(--_ctm-dn-cr-se-br-rs))
        );

        padding: 5px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        width: max-content;
        gap: 6px;

        label {
          width: 100%;
          display: inline-block;
          color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
          font-family: var(
            --_ctm-mob-dn-cr-se-ft-fy,
            var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-cr-se-tt-tm,
            var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-cr-se-wd-wp,
            var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-cr-se-wd-bk,
            var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk))
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          font-size: var(
            --_ctm-mob-dn-cr-se-ft-se,
            var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-cr-se-ft-wt,
            var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-cr-se-ft-se-ic,
            var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-cr-se-tt-an,
            var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-cr-se-lr-sg,
            var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-cr-se-le-ht,
            var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht))
          );
          padding-top: 6px;
          text-decoration: var(
            --_ctm-mob-dn-cr-se-ue,
            var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue)))
          );
        }

        .countdown__digit-font {
          margin-top: 2px;
          width: 100%;
          display: inline-block;
          color: var(
            --_ctm-mob-dn-cr-se-cr-dc,
            var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
          );
          font-family: var(
            --_ctm-mob-dn-cr-se-ft-fy-dc,
            var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
          );
          text-transform: var(
            --_ctm-mob-dn-cr-se-tt-tm-dc,
            var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc))
          );
          word-wrap: var(
            --_ctm-mob-dn-cr-se-wd-wp-dc,
            var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc))
          );
          word-break: var(
            --_ctm-mob-dn-cr-se-wd-bk-dc,
            var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc))
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          font-size: var(
            --_ctm-mob-dn-cr-se-ft-se-dc,
            var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc))
          );
          font-weight: var(
            --_ctm-mob-dn-cr-se-ft-wt-dc,
            var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc))
          );
          font-style: var(
            --_ctm-mob-dn-cr-se-ft-se-ic-dc,
            var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc))
          );
          text-align: var(
            --_ctm-mob-dn-cr-se-tt-an-dc,
            var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc))
          );
          letter-spacing: var(
            --_ctm-mob-dn-cr-se-lr-sg-dc,
            var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc))
          );
          line-height: var(
            --_ctm-mob-dn-cr-se-le-ht-dc,
            var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc))
          );
          text-decoration: var(
            --_ctm-mob-dn-cr-se-ue-dc,
            var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc)))
          );
        }

        .countdown__digits {
          display: flex;
          // gap: 5px;
          // justify-content: center;
        }

        .countdown__digit-box {
          // padding: 5px 10px;
          border-radius: 3px;
          width: auto;
        }

        .countdown label {
          color: var(--_ctm-mob-dn-cr-se-cr, var(--_ctm-tab-dn-cr-se-cr, var(--_ctm-dn-cr-se-cr)));
          font-family: var(
            --_ctm-mob-dn-cr-se-ft-fy,
            var(--_ctm-tab-dn-cr-se-ft-fy, var(--_ctm-dn-cr-se-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-cr-se-tt-tm,
            var(--_ctm-tab-dn-cr-se-tt-tm, var(--_ctm-dn-cr-se-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-cr-se-wd-wp,
            var(--_ctm-tab-dn-cr-se-wd-wp, var(--_ctm-dn-cr-se-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-cr-se-wd-bk,
            var(--_ctm-tab-dn-cr-se-wd-bk, var(--_ctm-dn-cr-se-wd-bk))
          );
          font-size: var(
            --_ctm-mob-dn-cr-se-ft-se,
            var(--_ctm-tab-dn-cr-se-ft-se, var(--_ctm-dn-cr-se-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-cr-se-ft-wt,
            var(--_ctm-tab-dn-cr-se-ft-wt, var(--_ctm-dn-cr-se-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-cr-se-ft-se-ic,
            var(--_ctm-tab-dn-cr-se-ft-se-ic, var(--_ctm-dn-cr-se-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-cr-se-tt-an,
            var(--_ctm-tab-dn-cr-se-tt-an, var(--_ctm-dn-cr-se-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-cr-se-lr-sg,
            var(--_ctm-tab-dn-cr-se-lr-sg, var(--_ctm-dn-cr-se-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-cr-se-le-ht,
            var(--_ctm-tab-dn-cr-se-le-ht, var(--_ctm-dn-cr-se-le-ht))
          );
          text-decoration: var(
            --_ctm-mob-dn-cr-se-ue,
            var(--_ctm-tab-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue, var(--_ctm-dn-cr-se-ue)))
          );
        }

        .countdown p {
          margin: 5px 0px;
          font-weight: 700;
          letter-spacing: 0.3rem;

          color: var(
            --_ctm-mob-dn-cr-se-cr-dc,
            var(--_ctm-tab-dn-cr-se-cr-dc, var(--_ctm-dn-cr-se-cr-dc))
          );
          font-family: var(
            --_ctm-mob-dn-cr-se-ft-fy-dc,
            var(--_ctm-tab-dn-cr-se-ft-fy-dc, var(--_ctm-dn-cr-se-ft-fy-dc))
          );
          text-transform: var(
            --_ctm-mob-dn-cr-se-tt-tm-dc,
            var(--_ctm-tab-dn-cr-se-tt-tm-dc, var(--_ctm-dn-cr-se-tt-tm-dc))
          );
          word-wrap: var(
            --_ctm-mob-dn-cr-se-wd-wp-dc,
            var(--_ctm-tab-dn-cr-se-wd-wp-dc, var(--_ctm-dn-cr-se-wd-wp-dc))
          );
          word-break: var(
            --_ctm-mob-dn-cr-se-wd-bk-dc,
            var(--_ctm-tab-dn-cr-se-wd-bk-dc, var(--_ctm-dn-cr-se-wd-bk-dc))
          );
          font-size: var(
            --_ctm-mob-dn-cr-se-ft-se-dc,
            var(--_ctm-tab-dn-cr-se-ft-se-dc, var(--_ctm-dn-cr-se-ft-se-dc))
          );
          font-weight: var(
            --_ctm-mob-dn-cr-se-ft-wt-dc,
            var(--_ctm-tab-dn-cr-se-ft-wt-dc, var(--_ctm-dn-cr-se-ft-wt-dc))
          );
          font-style: var(
            --_ctm-mob-dn-cr-se-ft-se-ic-dc,
            var(--_ctm-tab-dn-cr-se-ft-se-ic-dc, var(--_ctm-dn-cr-se-ft-se-ic-dc))
          );
          text-align: var(
            --_ctm-mob-dn-cr-se-tt-an-dc,
            var(--_ctm-tab-dn-cr-se-tt-an-dc, var(--_ctm-dn-cr-se-tt-an-dc))
          );
          letter-spacing: var(
            --_ctm-mob-dn-cr-se-lr-sg-dc,
            var(--_ctm-tab-dn-cr-se-lr-sg-dc, var(--_ctm-dn-cr-se-lr-sg-dc))
          );
          line-height: var(
            --_ctm-mob-dn-cr-se-le-ht-dc,
            var(--_ctm-tab-dn-cr-se-le-ht-dc, var(--_ctm-dn-cr-se-le-ht-dc))
          );
          text-decoration: var(
            --_ctm-mob-dn-cr-se-ue-dc,
            var(--_ctm-tab-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc, var(--_ctm-dn-cr-se-ue-dc)))
          );
        }
      }
      // The divider between two counters. `.countdown` is a column grid, so this is a
      // grid item sitting beside the `.countdown__element` boxes.
      //
      // `align-self: center` matters: grid items stretch by default, so the separator
      // filled the row's full height and the icon inside it centred against that,
      // rather than against the digits it sits between. The `margin-top: 6px` that
      // used to nudge it back was a guess at one particular counter height and threw
      // the alignment out again at any other size.
      .separator {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        // Kills the inline-SVG baseline gap, which otherwise adds a few pixels under
        // the glyph and reads as the icon sitting high.
        line-height: 0;
        flex-shrink: 0;
        svg {
          width: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
          height: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
          display: block;

          path {
            stroke: prepareMediaVariable(--_ctm-dn-dr-se-in-c1);
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-se-wh, 1.25);
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  50% {
    // transform: scale(0.5);
    opacity: 1;
  }
  0% {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
}
@keyframes flip {
  0% {
    animation-timing-function: ease-out;
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  }
  40% {
    animation-timing-function: ease-out;
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  }
  50% {
    animation-timing-function: ease-in;
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  }
  80% {
    animation-timing-function: ease-in;
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
  }
  100% {
    animation-timing-function: ease-in;
    transform: perspective(400px);
  }
}