.DateStringCalendar {
  .Month {
    @apply gap-1 border-none bg-transparent;
  }

  .DateStringCalendarForm {
    @apply flex flex-nowrap items-center justify-between py-4 pb-3;
  }

  .DateStringCalendarForm-previous,
  .DateStringCalendarForm-next {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-md before:btu-icon;
  }

  .DateStringCalendarForm-previous {
    @apply -order-1 before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
  }

  .DateStringCalendarForm-next {
    @apply before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left;
  }

  .DateStringCalendarForm-month + .ComboInput {
    @apply w-auto;
  }

  .DateStringCalendarForm-year {
    @apply w-[4.375rem] px-2 text-sm;
  }

  .DateStringCalendarDate {
    @apply flex justify-center pb-4;

    .Month-day {
      @apply size-9 rounded-full p-4 text-sm;
    }

    .Month-dowLabel {
      @apply size-9 bg-inherit px-3;
    }
  }

  .DateStringCalendarTime {
    @apply relative py-4 before:absolute before:-left-[var(--space,_0px)] before:-right-[var(--space,_0px)] before:top-0 before:h-[1px] before:bg-gray-200;

    .DateStringCalendarTime-custom {
      @apply grid grid-cols-3 gap-2;

      &.is-hidden {
        @apply hidden;
      }
    }
  }

  .DateStringCalendarAction {
    @apply relative flex items-center gap-3 py-4 before:absolute before:-left-[var(--space,_0px)] before:-right-[var(--space,_0px)] before:top-0 before:h-[1px] before:bg-gray-200;

    &-set {
      @apply btu-button btu-button-primary;
    }

    &-now {
      @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray;
    }

    &-clear {
      @apply btu-button btu-button-gray ms-auto;
    }
  }

  .is-hidden {
    @apply hidden;
  }
}

.Popup:has(.DateStringCalendar) .Popup-close {
  @apply hidden;
}

.DateStringCalendarEmbedded-widget {
  @apply Widget w-max rounded-lg border;
}
