.scrollbar::-webkit-scrollbar {
  @apply h-carousel-heightScrollbar w-carousel-widthScrollbar;
}

.scrollbar::-webkit-scrollbar-track {
  @apply rounded-scrollbar bg-carousel-base-scrollbarTrack;
}

.scrollbar::-webkit-scrollbar-thumb {
  @apply rounded-scrollbar bg-carousel-base-scrollbarThumb;
}

/* toolbar styles  */
.ql-toolbar.ql-snow {
  @apply flex items-center divide-x rounded-t-lg border-0 border-b border-WYSIWYG-base-toolbar bg-WYSIWYG-base-toolbar py-WYSIWYG-paddingToolbarVertical px-WYSIWYG-paddingToolbarHorizontal;
}

/* toolbar select  */
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  @apply gap-WYSIWYG-gapOptions mt-WYSIWYG-marginOptions shadow-WYSIWYG-shadowOptions flex flex-col rounded-lg;
}

.ql-snow .ql-picker {
  @apply font-WYSIWYG-weightPicker flex h-10 items-center justify-center;
}

.ql-snow.ql-toolbar .ql-picker-label,
.ql-snow.ql-toolbar .ql-picker-label.ql-active {
  @apply h-auto text-WYSIWYG-base-select;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-snow.ql-toolbar .ql-picker-label:hover {
  @apply text-inherit;
}

.ql-snow .ql-picker.ql-size {
  @apply w-full min-w-[120px];
}

.ql-picker-label svg {
  @apply hidden;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  @apply border-transparent;
}

.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected:hover {
  @apply text-WYSIWYG-base-iconActive;
}

/* toolbar buttons  */
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  @apply rounded-WYSIWYG-radiusButton flex h-8 w-8 items-center justify-center p-0 text-WYSIWYG-base-icon;
}
.ql-snow.ql-toolbar button[disabled],
.ql-snow .ql-toolbar button[disabled] {
  @apply cursor-default !text-WYSIWYG-base-disabled;
}

.ql-snow.ql-toolbar button:hover[disabled],
.ql-snow .ql-toolbar button:hover[disabled] {
  @apply cursor-default !bg-WYSIWYG-base-disabled;
}

.ql-snow.ql-toolbar button:hover {
  @apply bg-WYSIWYG-base-iconHover text-WYSIWYG-base-iconHover;
}

.ql-snow.ql-toolbar button.ql-active:hover {
  @apply bg-WYSIWYG-base-iconHover;
}

.ql-snow.ql-toolbar button.ql-active {
  @apply bg-WYSIWYG-base-iconActive text-WYSIWYG-base-iconActive;
}

.ql-snow.ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active:focus {
  @apply shadow-WYSIWYG-shadowFocus bg-WYSIWYG-base-iconFocus shadow-WYSIWYG-base-iconFocus;
}
.ql-snow.ql-toolbar button:focus,
.disabled .ql-snow.ql-toolbar button.ql-active:focus {
  @apply bg-WYSIWYG-base-toolbar shadow-none;
}

/* text editor styles  */
.ql-container.ql-snow {
  @apply border-0  bg-WYSIWYG-base-editor;
}

.ql-container.ql-snow.ql-disabled {
  @apply bg-WYSIWYG-base-disabled;
}

.quill,
.ql-container.ql-snow {
  @apply rounded-WYSIWYG-radiusBase;
}

.ql-editor {
  @apply text-WYSIWYG-fontEditor font-WYSIWYG-weightEditor px-WYSIWYG-paddingEditorHorizontal py-WYSIWYG-paddingEditorVertical text-WYSIWYG-base-editor;
}

/* placeholder  */
.ql-editor.ql-blank::before {
  @apply text-WYSIWYG-fontEditor not-italic;
}

.ql-disabled .ql-editor.ql-blank::before {
  @apply text-WYSIWYG-base-disabled;
}

/* size-picker-label  */
.ql-snow .ql-picker.ql-size {
  @apply pl-WYSIWYG-paddingSizeLeft;
}

.ql-snow.ql-toolbar.disabled .ql-picker-label {
  @apply !text-WYSIWYG-base-disabled;
}

.ql-snow.ql-toolbar.disabled .ql-size {
  @apply pointer-events-none !border-WYSIWYG-base-disabled;
}

/* color-picker-label  */
.ql-snow .ql-picker .ql-picker-label {
  @apply -ml-WYSIWYG-marginLabel;
}
.ql-snow .ql-picker[disabled] .ql-picker-label {
  @apply cursor-default !text-WYSIWYG-base-disabled;
}

.ql-snow .ql-picker[disabled] * {
  @apply pointer-events-none;
}

.react-datepicker__aria-live {
  @apply hidden;
}

.react-datepicker__month-container {
  @apply flex flex-col;
}

.react-datepicker__week {
  @apply flex;
}

.react-datepicker__day-names {
  @apply flex justify-around px-datePicker-paddingDayNames text-center text-datePicker-fontDatePart font-datePicker-weightDatePart text-datePicker-base-day;
}

.react-datepicker__day-name {
  @apply flex aspect-square w-datePicker-widthDayName items-center justify-around rounded-datePicker-radiusDayName py-datePicker-paddingDayName;
}

.react-datepicker__day--outside-month {
  @apply !text-datePicker-base-dayOutsideMonth;
}

.react-datepicker__day--in-range {
  @apply rounded-datePicker-radiusRange bg-datePicker-base-dayInRange !text-datePicker-base-dayInRange hover:!bg-datePicker-base-dayInRangeHover hover:!text-datePicker-base-dayInRangeHover;
}

.react-datepicker__day--in-selecting-range {
  @apply rounded-datePicker-radiusRange bg-datePicker-base-dayInRange text-datePicker-base-dayInRange;
}

.react-datepicker__day--selecting-range-start {
  @apply rounded-l-datePicker-radiusDatePart border-2 border-datePicker-base-selectingRangeEdge bg-datePicker-base-selectingRangeEdge text-datePicker-base-selectingRangeEdge hover:rounded-datePicker-radiusDatePart hover:bg-datePicker-base-selectingRangeEdgeHover;
}

.react-datepicker__day--selecting-range-end {
  @apply rounded-r-datePicker-radiusDatePart border-datePicker-borderWidthSelectingRangeEdge border-datePicker-base-selectingRangeEdge bg-white text-black hover:bg-datePicker-base-dayHover;
}

.react-datepicker__day--range-start {
  @apply rounded-l-datePicker-radiusDatePart bg-datePicker-base-selectingRangeEdge text-datePicker-base-selectingRangeEdge hover:bg-datePicker-base-selectingRangeEdgeHover hover:text-datePicker-base-selectingRangeEdgeHover;
}

.react-datepicker__day--range-end {
  @apply rounded-r-datePicker-radiusDatePart !rounded-l-none bg-datePicker-base-selectingRangeEdge text-datePicker-base-selectingRangeEdge hover:bg-datePicker-base-selectingRangeEdgeHover hover:text-datePicker-base-selectingRangeEdge;
}

.react-datepicker__month {
  @apply flex flex-col gap-y-datePicker-gapMonth px-datePicker-paddingMonthHorizontal pb-datePicker-paddingMonthBottom pt-datePicker-paddingMonthTop text-datePicker-fontDatePart font-datePicker-weightDatePart;
}

.react-datepicker__monthPicker {
  @apply gap-y-datePicker-gapMonthPicker;
}

.react-datepicker__month-wrapper {
  @apply flex gap-y-datePicker-gapMonthWrapper;
}

.react-datepicker__month-text {
  @apply shrink-0 basis-1/3 rounded-datePicker-radiusDatePart border-datePicker-borderWidthDatePart border-transparent py-datePicker-paddingMonthTextVertical px-datePicker-paddingMonthTextHorizontal text-center hover:cursor-pointer hover:border-datePicker-base-datePartHover hover:bg-datePicker-base-datePartHover;
}

.react-datepicker__year-wrapper {
  @apply grid grid-cols-3 gap-datePicker-gapYearWrapper py-datePicker-paddingYearWrapperVertical px-datePicker-paddingYearWrapperHorizontal text-datePicker-fontDatePart font-datePicker-weightDatePart;
}

.react-datepicker__year-text {
  @apply rounded-datePicker-radiusDatePart border-datePicker-borderWidthDatePart border-transparent px-datePicker-paddingYearTextHorizontal py-datePicker-paddingYearTextVertical text-center hover:cursor-pointer hover:border-datePicker-base-datePartHover hover:bg-datePicker-base-datePartHover;
}

.react-datepicker__triangle {
  @apply hidden;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");