@st-namespace 'DatePickerForInput-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 [ createFont, createColor ] from '../../common/formatters.st';
@st-import WSRCalendar from 'wix-style-react-tpa/dist/es/src/Calendar/WsrCalendar.st.css';
@st-import [ dayWrapper ] from 'wix-style-react-tpa/dist/es/src/Calendar/BaseCalendar/WsrBaseCalendar.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);

:vars {
  headerPaddingTop: 28px;
  headerPaddingSides: 21px;
  headerPaddingBottom: 0px;

  tableBorderTop: 0;
  tableBorderSides: 21px;
  tableBorderBottom: 20px;
}

.noPadding {
  padding: 0;
}

.root {}

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

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

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

.calendar::header {
  padding: value(headerPaddingTop) value(headerPaddingSides) value(headerPaddingBottom);
  background-color: createColor(--wix-ui-tpa-date-picker-background-color, var(--wix-color-1));
  border-radius: 0;
}

.calendar:removeOuterPadding::header {
  -st-mixin: noPadding();
}

.calendar::header::arrowLeft:skin(light),
.calendar::header::arrowRight:skin(light) {
  color: createColor(--wix-ui-tpa-date-picker-navigation-arrows-color, 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(--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: createFont(--wix-ui-tpa-date-picker-month-and-year-caption-font, 'Body-M', '{ "line-height": "24px", "size": "16px" }');
}

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

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

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

.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(--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(--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(--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(--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(--wix-color-5));
  -st-mixin: createFont(null, 'Body-M', '{ "line-height": "20px", "size": "14px" }');
}

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

/* The table wrapper. */
.calendar::month {
  width: 100%;
  height: 100%;
  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::month,
.calendar::month th,
.calendar::month td button {
  -st-mixin: createFont(--wix-ui-tpa-date-picker-day-font, 'Body-M', '{ "line-height": "20px", "size": "14px" }');
}

.calendar:removeOuterPadding::month {
  min-width: calc(240em/14);
  min-height: 284px;
}

.calendar::table {
  width: 100%;
  border-collapse: separate;
  margin-inline: auto;
  padding: 0;
  border-width: value(tableBorderTop) value(tableBorderSides) value(tableBorderBottom);
  border-style: solid;
  border-color:  createColor(--wix-ui-tpa-date-picker-input-background-color, var(--wix-color-1));
}

.calendar:removeOuterPadding::table {
  -st-mixin: noPadding();
}

/* The table’s head. */
.calendar::weekdays {
  background-color: createColor(--wix-ui-tpa-date-picker-background-color, var(--wix-color-1));
}

/* The head cell. */
.calendar::weekday {
  padding: 20px 0 16px;
  color: createColor(--wix-ui-tpa-date-picker-weekday-text-color, var(--wix-color-8));
  width: calc(34em/14);
}

/* The table body. */
.calendar::body {
  background-color: createColor(--wix-ui-tpa-date-picker-background-color, var(--wix-color-1));
}

/* The table’s row. */
.calendar::week:not(:last-child) {
  margin-bottom: var(--wix-ui-tpa-date-picker-weeks-vertical-spacing, 0px);
}

/* The day element: it is a span when not interactive, a button otherwise. */
.calendar::day {
  color: createColor(--wix-ui-tpa-date-picker-day-color, 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%);
  margin: 0 auto !important;
}

.calendar::day .dayWrapper, .calendar::day:focus {
  border-radius: var(--wix-ui-tpa-date-picker-selected-day-border-radius, 50%) !important;
}

.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(--wix-color-5));
  background-color: createColor(--wix-ui-tpa-date-picker-selected-day-b-g-color, var(--wix-color-8), 0.1);
}

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

.calendar::day:today:not(:selected):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:today:not(:selected):not(:hover):focus {
  box-shadow: none;
}

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

.calendar::day:outside,
.calendar::day:disabled {
  color: createColor(--wix-ui-tpa-date-picker-disabled-day-color, 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) .dayWrapper:hasIndication {
  color: createColor(--wix-ui-tpa-date-picker-available-day-color, var(--wix-ui-tpa-date-picker-day-color, var(--wix-color-5)));
}

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

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

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

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