@st-namespace 'DatePicker-st-css';
@st-import [ --wix-color-1, --wix-color-5, --wix-color-8, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-primary-background-color-rgb, --wst-paragraph-2-color-rgb, --wst-links-and-actions-color-rgb, --wst-system-disabled-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ createFont, createColor, createFontWithOverrides ] from '../../common/formatters.st';
@st-import Calendar from './Calendar/Calendar.st.css';
@st-import [ dayWrapper, dayText ] from './Calendar/BaseCalendar/BaseCalendar.st.css';
@st-import [ popoverContent ] from '../internal/WixUiCoreComponents/components/CorePopover/CorePopover.st.css';
@st-import [ focusRing ] from '../../common/palette.st.css';

/*
 * The calendar background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-date-picker-background-color);
/*
 * The color of the calendar navigation arrows
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-date-picker-navigation-arrows-color);
/*
 * The font of the calendar month snd year caption.
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '16px' lineHeight: '24px'}
 */
@property st-global(--wix-ui-tpa-date-picker-month-and-year-caption-font);
/*
 * The color of the calendar month and year caption
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-date-picker-month-and-year-caption-color);
/*
 * The font color of the calendar's weekdays.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-date-picker-weekday-text-color);
/*
 * The font of a specific date and the weekday texts. The minimum font size is 14px and the maximum is 24px.
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: 1 }
 */
@property st-global(--wix-ui-tpa-date-picker-day-font);
/*
 * The font color of a specific day.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-date-picker-day-color);
/*
 * The font color of available days.
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-date-picker-available-day-color);
/*
 * The font color of the selected day.
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-date-picker-selected-day-color);
/*
 * The background color of the selected day.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-date-picker-selected-day-bg-color);
/*
 * The background color of today.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-date-picker-today-bg-color);
/*
 * The border radius of the selected day. The value could be in px or %.
 * @type size
 * @default 100%
 */
@property st-global(--wix-ui-tpa-date-picker-selected-day-border-radius);
/*
 * The background color of a past day. past day is a date that are not selectable.
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-date-picker-past-day-color);
/*
 * The background color of a disabled day. Disabled day is a date that are not selectable.
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-date-picker-disabled-day-color);
/*
 * The vertical space between weeks.
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-date-picker-weeks-vertical-spacing);

/*
 * The minimum height of the date picker.
 * @type size
 */
@property st-global(--wix-ui-tpa-date-picker-min-height);

.root {}

.root .popoverContent {
  border-radius: 0;
}

.calendar {
  -st-extends: Calendar;
  -st-states: removeOuterPadding;
}

.calendar::month {
  width: 100%;
  height: 100%;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "20px", "size": "14px" }'),
  createFont((--wix-ui-tpa-date-picker-day-font, --wst-paragraph-2-overriden-font), 'Body-M');
  /* Only 'auto' is fully supported as a custom minHeight value */
  min-height: var(--wix-ui-tpa-date-picker-min-height, 332px);
  /* The minimum width should be 280px in order to support mobile.
       Since the minimum font size is 14px the expression `280em/value(minFontSize)` will be reduced to 280px in this case.
    */
  min-width: calc(280em/14);
}

/* calendar header */

.calendar::header {
  padding: 28px 21px 0;
  background-color: createColor(--wix-ui-tpa-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  border-radius: 0;
}

.calendar::header::arrowLeft:skin(light),
.calendar::header::arrowRight:skin(light) {
  color: createColor(--wix-ui-tpa-date-picker-navigation-arrows-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  background: none;
  width: 24px;
  height: 24px;
}

.calendar::header::arrowLeft:skin(light) {
  margin: 0;
}

.calendar::header::arrowRight:skin(light) {
  margin: 0;
}

.calendar::header::arrowLeft:skin(light):hover,
.calendar::header::arrowRight:skin(light):hover {
  background: none;
  border: none;
  color: createColor(--wix-ui-tpa-date-picker-navigation-arrows-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.7);
}

.calendar::header::arrowLeft:skin(light):active,
.calendar::header::arrowRight:skin(light):active {
  background: none;
  color: createColor(--wix-ui-tpa-date-picker-navigation-arrows-color, var(--wix-color-5), 0.7);
}

.calendar::header::yearAndMonthWrapper {
  width: 12.6em;
  min-width: 192px;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "16px" }'),
  createFont((--wix-ui-tpa-date-picker-month-and-year-caption-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.calendar::header::caption {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "16px" }'),
  createFont((--wix-ui-tpa-date-picker-month-and-year-caption-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-date-picker-month-and-year-caption-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

/******************************************************/

/* calendar Weekdays */

.calendar::weekdays {
  padding: 0 21px;
  background-color: createColor(--wix-ui-tpa-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.calendar::weekday {
  padding: 20px 0 16px;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "20px", "size": "14px" }'),
  createFont((--wix-ui-tpa-date-picker-day-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-date-picker-weekday-text-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  width: calc(34em/14);
  justify-content: center;
  display: flex;
  flex-shrink: 0;
}

/******************************************************/

/* calendar body */

.calendar::body {
  padding: 0 21px 20px;
  background-color: createColor(--wix-ui-tpa-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.calendar:removeOuterPadding::header {
  padding: 0;
}

.calendar:removeOuterPadding::body {
  padding: 0;
}

.calendar:removeOuterPadding::weekdays {
  padding: 0;
}

.calendar:removeOuterPadding::week {
  padding: 0;
}

.calendar:removeOuterPadding::month {
  min-width: calc(240em/14);
  min-height: var(--wix-ui-tpa-date-picker-min-height, 284px);
}

.calendar::week:not(:last-child) {
  margin-bottom: var(--wix-ui-tpa-date-picker-weeks-vertical-spacing, 0px);
}

.calendar::day {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "20px", "size": "14px" }'),
  createFont((--wix-ui-tpa-date-picker-day-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  width: calc(34em/14);
  height: calc(34em/14);
  border-radius: var(--wix-ui-tpa-date-picker-selected-day-border-radius, 100%);
  flex-shrink: 0;
}

.calendar::dayText {
  line-height: 1;
}

.calendar::dayIndicationContainer {
  padding: calc(3em/14) 0;
  height: calc(10em/14);
}

.calendar::day:hover {
  color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  background-color: createColor(--wix-ui-tpa-date-picker-selected-day-b-g-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)), 0.1);
}

.calendar::today:not(:hover) {
  color: createColor(--wix-ui-tpa-date-picker-selected-day-b-g-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  box-shadow: none;
}

.calendar::today:hover {
  color: createColor(--wix-ui-tpa-date-picker-selected-day-b-g-color, var(--wix-color-8));
  background-color: createColor(--wix-ui-tpa-date-picker-selected-day-b-g-color, var(--wix-color-8), 0.1);
}

.calendar::day:selected:not(:outside) {
  color: createColor(--wix-ui-tpa-date-picker-selected-day-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.calendar::day:outside,
.calendar::day:disabled {
  color: createColor(--wix-ui-tpa-date-picker-disabled-day-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.calendar::day:outside:past,
.calendar::day:disabled:past {
  color: createColor(--wix-ui-tpa-date-picker-past-day-color, var(--wix-ui-tpa-date-picker-disabled-day-color, var(--wix-color-29)));
}

.calendar::day:not(:selected) .dayText:hasIndication {
  color: createColor(--wix-ui-tpa-date-picker-available-day-color, var(--wix-ui-tpa-date-picker-day-color, var(--wix-color-5)));
}

/* removing the range design of WSR */
/* todo: remove the important after removing the WSR important (https://jira.wixpress.com/browse/DSM-1585) */
/*********/
.calendar::day:selected:not(:outside):last-of-type,
.calendar::day:selected:not(:outside):first-of-type,
.calendar::lastOfMonth.calendar::day:not(:outside),
.calendar::firstOfMonth.calendar::day:not(:outside),
.calendar::day:selected:not(:outside) {
  border-radius: var(--wix-ui-tpa-date-picker-selected-day-border-radius, 100%) !important;
}

.calendar::day:selected:not(:outside) .dayWrapper {
  background-color: createColor(--wix-ui-tpa-date-picker-selected-day-bg-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

.calendar::day:selected:not(:outside):hover .dayWrapper {
  background-color: createColor(--wix-ui-tpa-date-picker-selected-day-bg-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)), 0.7);
}

.root .dayWrapper {
  border-radius: var(--wix-ui-tpa-date-picker-selected-day-border-radius, 100%);
}


/******************************************************/


/* month and years dropdowns */

.calendar::header::monthDropdown::caption,
.calendar::header::yearDropdown::caption {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "16px" }'),
  createFont((--wix-ui-tpa-date-picker-month-and-year-caption-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-date-picker-month-and-year-caption-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  height: 24px;
}

/* List */

.calendar::header::monthDropdown::dropdown::list::contentContainer,
.calendar::header::yearDropdown::dropdown::list::contentContainer {
  background-color: createColor(--wix-ui-tpa-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  padding: 12px 0;
}

/* List: Scroll */
.calendar::header::monthDropdown::dropdown::list::options::-webkit-scrollbar,
.calendar::header::yearDropdown::dropdown::list::options::-webkit-scrollbar {
  width: 16px;
}

.calendar::header::monthDropdown::dropdown::list::options::-webkit-scrollbar-thumb,
.calendar::header::yearDropdown::dropdown::list::options::-webkit-scrollbar-thumb {
  /* https://stackoverflow.com/a/16829330/5343330 */
  background-color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wix-color-5), 0.06);
  background-clip: content-box;
  border-radius: calc(4px * 2);
  border: 4px solid transparent;
  height: 72px;
}

.calendar::header::monthDropdown::dropdown::list::options::-webkit-scrollbar-thumb:hover,
.calendar::header::yearDropdown::dropdown::list::options::-webkit-scrollbar-thumb:hover {
  background-color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wix-color-5), 0.15);
}

.calendar::header::monthDropdown::dropdown::list::options::-webkit-scrollbar-thumb:active,
.calendar::header::yearDropdown::dropdown::list::options::-webkit-scrollbar-thumb:active {
  background-color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wix-color-5), 0.25);
}

/*************************/

.calendar::header::monthDropdown::dropdown::list::selectableOption,
.calendar::header::yearDropdown::dropdown::list::selectableOption {
  background-color: createColor(--wix-ui-tpa-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  padding: 0 20px;
}

.calendar::header::monthDropdown::dropdown::list::selectableOption:not(:disabled):not(:selected):hover,
.calendar::header::yearDropdown::dropdown::list::selectableOption:not(:disabled):not(:selected):hover {
  background-color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-5)), 0.06);
}

.calendar::header::monthDropdown::dropdown::list::selectableOption:selected,
.calendar::header::yearDropdown::dropdown::list::selectableOption:selected {
  background-color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-5)), 0.06);
}

.calendar::header::monthDropdown::dropdown::list::selectableOption:selected:hover,
.calendar::header::yearDropdown::dropdown::list::selectableOption:selected:hover {
  background-color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-5)), 0.06);
}

.calendar::header::monthDropdown::dropdown::list::selectableOption::title,
.calendar::header::yearDropdown::dropdown::list::selectableOption::title {
  color: createColor(--wix-ui-tpa-date-picker-day-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "20px", "size": "14px" }'),
  createFont((null, --wst-paragraph-2-overriden-font), 'Body-M');
}

/* st-namespace-reference="../../../../src/components/DatePicker/DatePicker.st.css" */