@st-namespace 'WeeklyDatePicker-st-css';
@st-import [ --wix-color-5, --wix-color-1, --wix-color-8, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, setColor, setFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ focusRing ] from "../../common/palette.st.css";
@st-import [ --wst-paragraph-2-color-rgb, --wst-primary-background-color-rgb] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * The calendar background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-background-color);
/*
 * The color of the calendar navigation arrows
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-weekly-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-weekly-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-weekly-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-weekly-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-weekly-date-picker-day-font);
/*
 * The font color of a specific day.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-day-color);
/*
 * The font color of the selected day.
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-selected-day-color);
/*
 * The font color of available day.
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-available-day-color);
/*
 * The background color of today.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-today-bg-color);
/*
 * The background color of the selected day.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-selected-day-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-weekly-date-picker-selected-day-border-radius);
/*
 * The background color of a disabled day. Disabled day is a date that are not selectable.
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-disabled-day-color);
/*
 * The flex direction of the date picker. applies for the caption and the days.
 * @type size
 * @default column
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-flex-direction);



.root {
  -st-states: arrowLocation(enum(caption, dates)), groupWeekdaysAndDates, rtl;
  --min-font-size: 14;
  --default-selected-day-border-radius: 100%;
  --default-selected-day-border-radius-no-caption: 100px;
  background-color: createColor(--wix-ui-tpa-weekly-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  display: flex;
  flex-direction: var(--wix-ui-tpa-weekly-date-picker-flex-direction, column);
}

.root:arrowLocation(dates) .dayPickerContainer {
  display: flex;
}

.dayPickerContainer {
  flex-grow: 1;
}

.table {
  -st-states: isMobile;
  background-color: createColor(--wix-ui-tpa-weekly-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  padding: 0 0px 20px;
  width: 100%;
}

.table:isMobile {
  padding: 28px 0 28px;
}

.root:groupWeekdaysAndDates .table:isMobile {
  padding: 12px 0 0 0;
}

.root:arrowLocation(dates) .table {
  padding: 0;
}

.root:arrowLocation(dates) .table:isMobile {
  padding: 0;
}

.rdp {
  flex-grow: 1;
}

.day {
  display: flex;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "20px", "size": "14px" }'),
  createFont((--wix-ui-tpa-weekly-date-picker-day-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-weekly-date-picker-day-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  width: calc(34em/var(--min-font-size));
  height: calc(34em/var(--min-font-size));
  border-radius: var(--wix-ui-tpa-weekly-date-picker-selected-day-border-radius, var(--default-selected-day-border-radius));
  flex-shrink: 0;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.root:groupWeekdaysAndDates .day {
  width: auto;
  height: auto;
  padding: 8px;
  border-radius: var(--wix-ui-tpa-weekly-date-picker-selected-day-border-radius, var(--default-selected-day-border-radius-no-caption));
}

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

.button {
  border: none;
  background-color: inherit;
  cursor: pointer;
}

.button:disabled {
  pointer-events: none;
  color: createColor(--wix-ui-tpa-weekly-date-picker-disabled-day-color, var(--wix-color-29));
}

.button:hover:not(:disabled) {
  background-color: createColor(--wix-ui-tpa-weekly-date-picker-selected-day-bg-color, var(--wix-color-8), 0.1);
}

.day_selected:not(:disabled),
.day_selected:focus:not(:disabled),
.day_selected:active:not(:disabled),
.day_selected:hover:not(:disabled) {
  color: createColor(--wix-ui-tpa-weekly-date-picker-selected-day-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  background-color: createColor(--wix-ui-tpa-weekly-date-picker-selected-day-bg-color, var(--wix-color-8));
}

.month {
  display: block;
}

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

.header {
  -st-states: removeOuterPadding, isMobile;
  -st-mixin:
    setColor(--wix-ui-tpa-weekly-date-navigation-background-color, --wix-ui-tpa-weekly-date-picker-background-color),
    setColor(--wix-ui-tpa-weekly-date-navigation-navigation-arrows-color, --wix-ui-tpa-weekly-date-picker-navigation-arrows-color),
    setColor(--wix-ui-tpa-weekly-date-navigation-month-and-year-caption-color, --wix-ui-tpa-weekly-date-picker-month-and-year-caption-color),
    setFont(--wix-ui-tpa-weekly-date-navigation-month-and-year-caption-font, --wix-ui-tpa-weekly-date-picker-month-and-year-caption-font);
  padding: 28px 0px 0;
  border-radius: 0;
}

.header:isMobile {
  padding: 28px 0 0;
}

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

/******************************************************/
/* calendar Weekdays */

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

.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-weekly-date-picker-day-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-weekly-date-picker-weekday-text-color, var(--wix-color-8));
  width: calc(34em/var(--min-font-size));
}

/******************************************************/
/* style from react-day-picker */

/* Hide elements for devices that are not screen readers */
.vhidden {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: absolute !important;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  border: 0 !important;
}

.dayWrapper {
  -st-states: hasIndication;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.root:groupWeekdaysAndDates .dayWrapper {
  flex-direction: var(--wix-ui-tpa-weekly-date-picker-flex-direction, column);
  gap: 4px;
  line-height: 20px;
}

.dayWrapper:hasIndication {
  justify-content: flex-end;
}

.day:not(.day_selected) .dayWrapper:hasIndication {
  color: createColor(--wix-ui-tpa-weekly-date-picker-available-day-color, var(--wix-ui-tpa-weekly-date-picker-day-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))));
}

/*override the viewer focus ring*/
:global(#SITE_CONTAINER.focus-ring-active) .day:focus {
  -st-mixin: focusRing();
}

.day:focus::after {
  border-radius: var(--wix-ui-tpa-weekly-date-picker-selected-day-border-radius, var(--default-selected-day-border-radius));
  box-shadow: none;
}

.dayIndicationContainer {
  padding: calc(3em/var(--min-font-size)) 0;
  height: calc(10em/var(--min-font-size));
  box-sizing: border-box;
}

.caption {
  -st-mixin: setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-weekly-date-picker-month-and-year-caption-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
  createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5", "size": "16px" }'),
  setFont(--wix-ui-tpa-text-main-text-font, (--wix-ui-tpa-weekly-date-picker-month-and-year-caption-font, --wst-paragraph-2-overriden-font), 'Body-M');
  background-color: createColor(--wix-ui-tpa-weekly-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 16px 4px 0;
  min-width: 120px
}

.arrow {
  -st-mixin:
    setColor(--wix-ui-tpa-icon-button-icon-color, --wix-ui-tpa-weekly-date-picker-navigation-arrows-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))), ;
  font-size: inherit;
}

.root .arrow {
  background-color: createColor(--wix-ui-tpa-weekly-date-picker-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.root:rtl .arrow {
  transform: rotate(180deg);
}

.arrow svg {
  width: 24px;
  height: 24px;
}

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