.countdown-timer-wrapper:has(.countdown:empty) {
  display: none;
}

.countdown {
  --countdown-label-gap: 6px;

  display: flex;
  flex-direction: column;
  row-gap: 8px;
  visibility: hidden;

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

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

  .media-with-text__content-wrapper.left &,
  .banner__content-wrapper:not(.center) &,
  .popup-content:not(.center) &,
  .section-container.rich-text:not(.center) &,
  .product__info-container & {
    justify-content: flex-start; 

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

  .media-with-text__content-wrapper.right & {
    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;
  justify-content: center;
}

.countdown__number-wrapper,
.countdown__delimeter {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
}

.countdown__delimeter  {
  font-size: 0.5em;

  .countdown--minimized & {
    font-size: 0.666em;
  }
}

.countdown__number-wrapper {    
  position: relative;
  overflow: clip;

  .countdown:not(.countdown--minimized) & {
    height: max(1.32em, 24px);
    width: max(0.85em, 17px);
  }
}

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

  .countdown:not(.countdown--minimized) & {
    line-height: 100%;
  }
}

.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);
}

.countdown__label {
  text-align: center;
}