@use "../base/mixins" as *;
@use "../base/typography" as *;
@use "sass:map";
@use "sass:list";

.rolling-counter {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;

  &__container {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
  }
  &__digit {
    display: inline-flex;
  }
}

.digit-window {
  display: inline-block;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);

  &--h1 {
    @include digit("h1");

    .digit-num {
      @include typography("h1");
    }
  }

  &--h2 {
    @include digit("h2");

    .digit-num {
      @include typography("h2");
    }
  }

  &--h3 {
    @include digit("h3");

    .digit-num {
      @include typography("h3");
    }
  }

  &--h4 {
    @include digit("h4");

    .digit-num {
      @include typography("h4");
    }
  }

  &--p1 {
    @include digit("p1");

    .digit-num {
      @include typography("p1");
    }
  }

  &--p2 {
    @include digit("p2");

    .digit-num {
      @include typography("p2");
    }
  }
}

.digit-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.digit-num {
  display: flex;
  justify-content: center;
  align-items: center;
  font-variant-numeric: tabular-nums; 
  -webkit-font-smoothing: antialiased;
}