@st-namespace 'DatePickerInputOld-deprecated-st-css';
:import {
  -st-from: "../../common/formatters.st";
  -st-named: color, applyOpacity, fallback, font, unit;
}

:import {
  -st-from: "../TextField/TextField.deprecated.st.css";
  -st-default: TextField;
}

:import {
  -st-from: "./DatePickerForInputOld.deprecated.st.css";
  -st-named: calendar;
}

:import {
  -st-from: "wix-style-react-tpa/index.es.st.css";
  -st-named: WsrDatePickerOld;
}



:import {
  -st-from: '../internal/ErrorMessageWrapper/ErrorMessageWrapper.deprecated.st.css';
  -st-default: ErrorMessageWrapper;
}

:import {
  -st-from: "../../common/palette.st.css";
  -st-named: errorColor as defaultErrorColor;
}

/*Defaults*/
:vars {
  calendarWidth: 280px;
  calendarHeight: 332px;
  defaultMainLabelFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}";
  defaultLabelColor: color-5;
  defaultBorderColor: "opacity(color(color-5), 0.4)";
  defaultBorderWidth: 1;
  defaultBorderRadius: 0;
  defaultPopoverBackgroundColor: white;
}

/*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. The font size is 16px and could not be overridden.
        @default {theme: 'Body-M', lineHeight: '24px'}
        @fixed The font size is 16px and could not be overridden.
    */
  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 font size is 14px and could not be overridden.
        @default {theme: 'Body-M', lineHeight: '20px'}
        @fixed The font size is 14px 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 background color of a disabled day. Disabled day is a date that are not selectable.
        @default color-3
    */
  DisabledDayColor: --overridable;
  /*
        The background color of the date input.
        @default color-1
    */
  DateInputBGColor: --overridable;
  /*
        The text color of the date input.
        @default color-5
    */
  DateInputTextColor: --overridable;
  /*
        The date input border color.
        @default color-5
    */
  DateInputBorderColor: --overridable;
  /*
        The date input font.
        @default {theme: 'Body-M', size: '16px'}
    */
  DateInputFont: --overridable;
  /*
        The color representing an error
        @default #DF3131
    */
  ErrorColor: --overridable;
  /*
        A minimum height for the error message element
    */
  ErrorMessageMinHeight: --overridable;
  /*
        Input label font.
        @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
    */
  LabelFont: --overridable;
  /*
        Input label color.
        @default color-5
    */
  LabelColor: --overridable;
  /*
        Calendar popover border color.
        @default color-5 with 0.4 opacity
    */
  BorderColor: --overridable;
  /*
        Calendar popover border width.
        @default 1
    */
  BorderWidth: --overridable;
  /*
        Calendar popover border radius.
        @default 0
      */
  BorderRadius: --overridable;
}

/*
 * The calendar background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-date-picker-input-background-color);

/*
 * The color of the calendar navigation arrows
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-date-picker-input-navigation-arrows-color);

/*
 * The font of the calendar month snd year caption. The font size is 16px and could not be overridden.
 * @type font
 * @default preset: 'Body-M' | overrides: { lineHeight: '24px'}
 */
@property st-global(--wix-ui-tpa-date-picker-input-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-input-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-input-weekday-text-color);

/*
 * The font of a specific date and the weekday texts. The font size is 14px and could not be overridden.
 * @type font
 * @default preset: 'Body-M' | overrides: { lineHeight: '20px'}
 */
@property st-global(--wix-ui-tpa-date-picker-input-day-font);

/*
 * The font color of a specific day.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-date-picker-input-day-color);

/*
 * The font color of the selected day.
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-date-picker-input-selected-day-color);

/*
 * The background color of the selected day.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-date-picker-input-selected-day-b-g-color);

/*
 * 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-date-picker-input-disabled-day-color);

/*
 * The background color of the date input.
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-date-picker-input-date-input-b-g-color);

/*
 * The text color of the date input.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-date-picker-input-date-input-text-color);

/*
 * The date input border color.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-date-picker-input-date-input-border-color);

/*
 * The date input font.
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '16px'}
 */
@property st-global(--wix-ui-tpa-date-picker-input-date-input-font);

/*
 * The color representing an error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-date-picker-input-error-color);

/*
 * A minimum height for the error message element
 * @type size
 */
@property st-global(--wix-ui-tpa-date-picker-input-error-message-min-height);

/*
 * Input label font.
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-date-picker-input-label-font);

/*
 * Input label color.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-date-picker-input-label-color);

/*
 * Calendar popover border color.
 * @type color
 * @default --wix-color-5 with 0.4 opacity
 */
@property st-global(--wix-ui-tpa-date-picker-input-border-color);

/*
 * Calendar popover border width.
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-date-picker-input-border-width);

:vars {
  mainErrorColor: color(fallback(value(ErrorColor), value(defaultErrorColor)));
  mainLabelFont: fallback(font(value(LabelFont)), font(value(defaultMainLabelFont)));
  mainLabelColor: color(fallback(value(LabelColor), value(defaultLabelColor)));
  mainBorderColor: fallback(color(value(BorderColor)), value(defaultBorderColor));
  mainBorderWidth: fallback(value(BorderWidth), value(defaultBorderWidth));
  mainBorderRadius: fallback(value(BorderRadius), value(defaultBorderRadius));
}

.root {
  -st-states: newError;
  width: min-content;
}

.overrideStyleParams.root:newError {
  -st-mixin: ErrorMessageWrapper(ErrorColor value(mainErrorColor),
      MinMessageHeight unit(value(ErrorMessageMinHeight), px));
}

.overrideStyleParams .wsrDatePicker::popover::content {
  overflow: hidden;
  border-radius: unit(value(mainBorderRadius), px);

  outline-color: value(mainBorderColor);
  outline-style: solid;
  outline-width: unit(value(mainBorderWidth), px);

  /* Without this local variable browser misbehaves and changes width of container... */
  --offset: unit(value(mainBorderWidth), px);

  outline-offset: calc(var(--offset) * -1);

  background-color: fallback(color(value(BackgroundColor)), value(defaultPopoverBackgroundColor));
}

.wsrDatePicker {
  -st-extends: WsrDatePickerOld;
}

.overrideStyleParams .textField {
  -st-mixin: TextField(MainBorderColor value(DateInputBorderColor),
      MainBackgroundColor value(DateInputBGColor),
      MainTextColor value(DateInputTextColor),
      MainTextFont value(DateInputFont),
      ErrorColor value(mainErrorColor),
      MainLabelFont value(mainLabelFont),
      MainLabelTextColor value(mainLabelColor),
    );
}

.overrideStyleParams .wsrDatePicker {
  -st-mixin: calendar(BackgroundColor value(BackgroundColor),
      NavigationArrowsColor value(NavigationArrowsColor),
      MonthAndYearCaptionColor value(MonthAndYearCaptionColor),
      WeekdayTextColor value(WeekdayTextColor),
      DayColor value(DayColor),
      SelectedDayColor value(SelectedDayColor),
      SelectedDayBGColor value(SelectedDayBGColor),
      DisabledDayColor value(DisabledDayColor),

      MonthAndYearCaptionFont value(MonthAndYearCaptionFont),
      DayFont value(DayFont),
    );
}

.wsrDatePicker::calendar::month {
  width: value(calendarWidth);
}

.wsrDatePicker::calendar::header::caption {
  font-size: 16px;
}

.wsrDatePicker::calendar::weekday,
.wsrDatePicker::calendar::day {
  font-size: 14px;
}

.wsrDatePicker::calendar::header::monthDropdown::caption,
.wsrDatePicker::calendar::header::yearDropdown::caption {
  font-size: 16px;
}

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