@use "./mixins";

@layer components {
  .countdown {
    @include mixins.root;

    &__unit {
      @include mixins.unit;

      &.is-flipping {
        @include mixins.flipped-unit;
      }
    }

    &__card {
      @include mixins.card;
    }

    &__top,
    &__bottom,
    &__leaf-front,
    &__leaf-back {
      @include mixins.layer;
    }

    &__top,
    &__leaf-front {
      @include mixins.top-half;
    }

    &__bottom,
    &__leaf-back {
      @include mixins.bottom-half;
    }

    &__leaf-front,
    &__leaf-back {
      @include mixins.animated-half;
    }

    &__leaf-front {
      @include mixins.leaf-front;
    }

    &__leaf-back {
      @include mixins.leaf-back;
    }

    &__bottom {
      @include mixins.bottom-shadow;
    }

    &__value {
      @include mixins.value-position;
      @include mixins.value;
    }

    &__label {
      @include mixins.label;
    }
  }

  .countdown-tag {
    @include mixins.tag-root;

    &__part {
      @include mixins.tag-part;
    }

    &__value {
      @include mixins.tag-value;
    }

    &__label {
      @include mixins.tag-label;
    }

    &__separator {
      @include mixins.tag-separator;
    }
  }
}