.ads-DateRangePicker {
  @apply inline-flex;
}

.ads-DateRangePicker-trigger {
  @apply w-56;
}

.ads-DateRangePicker-trigger-inner {
  @apply items-center;
}

.ads-DateRangePicker-trigger-icon {
  @apply mr-2;
}

.ads-DateRangePicker-trigger-text {
  @apply text-left w-40;
}

.ads-DateRangePicker-popover-inner-wrapper--rightAligned {
  @apply flex-row-reverse;
}

.ads-DateRangePicker-presets-wrapper {
  @apply flex-col
    w-56
    p-2;
}

.ads-DateRangePicker-preset {
  @apply block
    text-left
    rounded-md
    p-2
    hover:bg-gray-100
    focus:outline-none
    focus:shadow-focus
    mb-1;
}

.ads-DateRangePicker-preset--isSelected {
  @apply bg-gray-200
    hover:bg-gray-300
    focus:bg-gray-200;
}

.ads-DateRangePicker-preset--isSelected:focus {
  @apply hover:bg-gray-300;
}

.ads-DateRangePicker-custom-wrapper--leftAligned {
  @apply border-l;
}

.ads-DateRangePicker-custom-wrapper--rightAligned {
  @apply border-r;
}

.ads-DateRangePicker-custom-date-inputs-wrapper {
  @apply items-center
    p-3
    border-b;
}

.ads-DateRangePicker-custom-dates-to {
  @apply mx-3;
}

/* element and double class selector to increase specificity */
.ads-DateRangePicker-date-input.ads-DateRangePicker-date-input > input {
  @apply w-36
    h-8;
}

.ads-DateRangePicker-date-input-tooltip.ads-DateRangePicker-date-input-tooltip {
  @apply z-toast;
}

.ads-DateRangePicker-custom-date-calendars-wrapper {
  @apply border-b;
}

.ads-DateRangePicker-custom-date-footer {
  @apply justify-end
    p-3;
}