@st-namespace 'WeeklyDatePicker-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, applyOpacity, fallback, font, zeroAsTrue, applyUnit;
}
:import {
    -st-from: "../WeeklyDateNavigation/WeeklyDateNavigation.deprecated.st.css";
    -st-default: Header;
}
:import {
    -st-from: "../IconButton/IconButton.deprecated.st.css";
    -st-default: IconButton;
}
:import {
    -st-from: "../Text/Text.deprecated.st.css";
    -st-default: Text;
}

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: focusRing;
}
/* Defaults - default params */
:vars {
    calendarWidth: 100%;
    calendarHeight: 100%;
    sidePadding: 0px;
    minFontSize: 14;
    DefaultCellSize: 40px;

    DefaultBackgroundColor: color-1;

    DefaultNavigationArrowsColor: color-5;
    DefaultMonthAndYearCaptionFont: "{theme: 'Body-M', size: '16px', lineHeight: '24px'}";
    DefaultMonthAndYearCaptionColor: color-5;

    DefaultWeekdayTextColor: color-8;

    DefaultDayFont: "{theme: 'Body-M', size: '14px', lineHeight: '20px'}";
    DeafultDayColor: color-5;
    DefaultSelectedDayColor: color-1;
    DefaultSelectedDayBGColor: color-8;
    DefaultSelectedDayBorderRadius: 100%;
    DefaultDisabledDayColor: color-3;
}

/* Overrides */
:vars {
    /*
        The calendar background color
        @default color-1
    */
    BackgroundColor: --overridable;
    /*
        The color of the calendar navigation arrows
        @default color-5
    */
    NavigationArrowsColor: --overridable;
    /*
        The font of the calendar month snd year caption.
        @default {theme: 'Body-M', size: '16px' lineHeight: '24px'}
    */
    MonthAndYearCaptionFont: --overridable;
    /*
        The color of the calendar month and year caption
        @default color-5
    */
    MonthAndYearCaptionColor: --overridable;
    /*
        The font color of the calendar's weekdays.
        @default color-8
    */
    WeekdayTextColor: --overridable;
    /*
        The font of a specific date and the weekday texts. The minimum font size is 14px and the maximum is 24px.
        @default {theme: 'Body-M', size: '14px', lineHeight: 1 }
        @fixed The line height is 1 and could not be overridden.
    */
    DayFont: --overridable;
    /*
        The font color of a specific day.
        @default color-5
    */
    DayColor: --overridable;
    /*
        The font color of the selected day.
        @default color-1
    */
    SelectedDayColor: --overridable;
    /*
        The background color of the selected day.
        @default color-8
    */
    SelectedDayBGColor: --overridable;
    /*
        The border radius of the selected day. The value could be in px or %.
        @default 100%
    */
    SelectedDayBorderRadius: --overridable;
    /*
        The background color of a disabled day. Disabled day is a date that are not selectable.
        @default color-3
    */
    DisabledDayColor: --overridable;
}
/*
 * 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 background color of the selected day.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-weekly-date-picker-selected-day-b-g-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);
/* Overrides - deceleration of overridable parameters by the consumer */
:vars {
    CurrentBackgroundColor: color(fallback(value(BackgroundColor), value(DefaultBackgroundColor)));

    CurrentNavigationArrowsColor: color(fallback(value(NavigationArrowsColor), value(DefaultNavigationArrowsColor)));
    CurrentMonthAndYearCaptionFont: fallback(font(value(MonthAndYearCaptionFont)), font(value(DefaultMonthAndYearCaptionFont)));
    CurrentMonthAndYearCaptionColor: color(fallback(value(MonthAndYearCaptionColor), value(DefaultMonthAndYearCaptionColor)));
    DropdownOptionSelectedAndHoverBGColor: applyOpacity(value(CurrentDayColor), 0.06);

    CurrentWeekdayTextColor: color(fallback(value(WeekdayTextColor), value(DefaultWeekdayTextColor)));

    CurrentDayFont: fallback(font(value(DayFont)), font(value(DefaultDayFont)));
    CurrentDayColor: color(fallback(value(DayColor), value(DeafultDayColor)));
    CurrentDayBGColorHover: applyOpacity(value(CurrentSelectedDayBGColor), 0.1);
    CurrentSelectedDayColor: color(fallback(value(SelectedDayColor), value(DefaultSelectedDayColor)));
    CurrentSelectedDayBGColor: color(fallback(value(SelectedDayBGColor), value(DefaultSelectedDayBGColor)));
    CurrentSelectedDayBorderRadius: fallback(value(SelectedDayBorderRadius),value(DefaultSelectedDayBorderRadius));
    CurrentDisabledDayColor: color(fallback(value(DisabledDayColor), value(DefaultDisabledDayColor)));

    CurrentWeeksVerticalSpacing: applyUnit(fallback(value(WeeksVerticalSpacing),value(DefaultWeeksVerticalSpacing)), px);
}
.root {
}
/*******************/
.table {
    -st-states: isMobile;
    background-color: value(CurrentBackgroundColor);
    padding: 0 value(sidePadding) 20px;
    width: 100%;
}

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

.day {
    display: flex;
    font: value(CurrentDayFont);
    color: value(CurrentDayColor);
    width: calc(34em/value(minFontSize));
    height: calc(34em/value(minFontSize));
    border-radius: value(CurrentSelectedDayBorderRadius);
    flex-shrink: 0;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.day_today:not(.day_outside) {
    background: none;
    color: value(CurrentSelectedDayBGColor);
    box-shadow: none;
}

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

.button:disabled {
    pointer-events: none;
    color: value(CurrentDisabledDayColor);
}

.button:hover:not(:disabled) {
    background-color: value(CurrentDayBGColorHover);
}
.day_selected:not(:disabled),
.day_selected:focus:not(:disabled),
.day_selected:active:not(:disabled),
.day_selected:hover:not(:disabled) {
    color: value(CurrentSelectedDayColor);
    background-color: value(CurrentSelectedDayBGColor);
}

.month {
    display: block;
}
/***********************/

.header {
    -st-extends: Header;
    -st-states: removeOuterPadding, isMobile;
    padding: 28px value(sidePadding) 0;
    background-color: value(CurrentBackgroundColor);
    border-radius: 0;
}

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

.header::text {
    -st-mixin: Text(
            MainTextColor value(CurrentMonthAndYearCaptionColor),
            MainTextFont value(CurrentMonthAndYearCaptionFont)
    );
    margin: 0 20px;
}

.header:removeOuterPadding {
    padding: 0;
}

.header::arrow {
    -st-mixin: IconButton(
            IconColor value(CurrentNavigationArrowsColor)
    );
    font-size: inherit;
}

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

.weekdays {
    padding: 0 value(sidePadding);
    background-color: value(CurrentBackgroundColor);
    text-align: center;
}

.weekday {
    padding: 20px 0 16px;
    font: value(CurrentDayFont);
    color: value(CurrentWeekdayTextColor);
    width: calc(34em/value(minFontSize));
}

/******************************************************/
/* 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;
}
.dayWrapper:hasIndication {
    justify-content: flex-end;
}

/*override the viewer focus ring*/
.day:focus {
  -st-mixin: focusRing();
}
.day:focus::after {
    border-radius: value(CurrentSelectedDayBorderRadius);
    box-shadow: none;
}

.dayIndicationContainer {
    padding: calc(3em/value(minFontSize)) 0;
    height: calc(10em/value(minFontSize));
    box-sizing: border-box;
}

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