.countdown {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  font-family: var(--base-font-family);
  visibility: hidden;

  &.countdown--accent-text {
    font: var(--accent-heading-m-font);
  }

  &.countdown--visible {
    visibility: visible;
  }

  &:empty {
    display: none;
  }
}

.countdown__timer {
  display: flex;
  align-items: stretch;
  justify-content: center;
  column-gap: 4px;

  .media-with-text__content-wrapper.start &,
  .rich-text__wrapper.flex-start &,
  .banner__wrapper:not(.banner__wrapper--center-content) &,
  .slideshow__content:not(.slideshow__content--center) &,
  .product__info-container & {
    justify-content: flex-start;

    [dir="rtl"] & { 
      justify-content: flex-end;
    }
  }

  .media-with-text__content-wrapper.end & {
    justify-content: flex-end;

    [dir="rtl"] & { 
      justify-content: flex-start;
    }

    @media screen and (max-width: 768px) { 
      justify-content: flex-start;

      [dir="rtl"] & { 
        justify-content: flex-end;
      }
    }
  }
}

.countdown__pair-of-numbers-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: var(--countdown-label-gap);

  .countdown--minimized & {
    flex-direction: row;
    column-gap: 2px;
  }
}

.countdown__pair-of-numbers {
  display: flex;
  column-gap: 1px;
}

.countdown__number-wrapper,
.countdown__delimeter {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 100% !important;
  user-select: none;
}

.countdown__label {
  text-align: center;
}

.countdown__number-wrapper {    
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.6em;
  overflow: hidden;

  .countdown:not(.countdown--minimized) & {
    height: 1.335em;
    width: 0.795em;
  }
}

.countdown__number {
  --number-animation-translation: 10px;
}

.countdown__number--current {
  transition: transform .3s var(--transition-timing-function), opacity .3s var(--transition-timing-function);

  &.countdown__number--animated {
    transform: translateY(calc(-1 * var(--number-animation-translation)));
    transition: none;
    opacity: 0;
  }
}

.countdown__number--previous {
  position: absolute; 
  top: calc(50% + var(--number-animation-translation));
  left: 50%; 
  transform: translateY(-50%) translateX(-50%);
  transition: top .3s var(--transition-timing-function), opacity .3s var(--transition-timing-function);
  opacity: 0;

  &.countdown__number--animated {
    top: 50%;
    transition: none;
    opacity: 1;
  }
}

.countdown__complete-message {
  color: var(--layout-text-color);
}