@number_color: default;
@number_size: default;
@label_color: default;
@label_size: default;
@box_bg: default;
@box_padding: default;
@box_radius: default;
@gap: default;

.zaso-countdown {

  &__units {
    display: flex;
    flex-wrap: wrap;
    gap: @gap;
  }

  &__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: @box_bg;
    padding: @box_padding;
    border-radius: @box_radius;
    min-width: 4em;
  }

  &__value {
    color: @number_color;
    font-size: @number_size;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  &__label {
    color: @label_color;
    font-size: @label_size;
    line-height: 1.3;
    margin-top: 0.25em;
  }

  &__message {
    p:last-child {
      margin-bottom: 0;
    }
  }

  // Alignment text modifiers (single class; safe to nest).
  &--align-center {
    text-align: center;
  }

  &--align-right {
    text-align: right;
  }
}

// Unit-row alignment written FLAT (literal classes, no chained "&") so
// SiteOrigin's per-widget scoping prefixes them exactly once and they match.
.zaso-countdown--align-left .zaso-countdown__units {
  justify-content: flex-start;
}

.zaso-countdown--align-center .zaso-countdown__units {
  justify-content: center;
}

.zaso-countdown--align-right .zaso-countdown__units {
  justify-content: flex-end;
}