@st-namespace 'DatePickerInput-st-css';
@st-import [ --wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ calendar ] from './DatePickerForInput.st.css';
@st-import [
  --wst-primary-background-color-rgb,
  --wst-paragraph-2-color-rgb,
  --wst-paragraph-2-font-family,
  --wst-paragraph-2-font-size,
  --wst-system-disabled-color-rgb,
  --wst-system-error-color-rgb,
  --wst-shade-3-color-rgb,
] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ WsrDatePicker as WSRDatePicker ] from 'wix-style-react-tpa/index.st.css';
@st-import [ createColor, createFont, setColor, setFont, setVar ] from '../../common/formatters.st';
@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-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);

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

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

/*
 * Input border width
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-date-picker-input-date-input-border-radius);

/*
 * Input text color when it's disabled
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-date-picker-input-input-disabled-text-color);

/*
 * Input error border color
 * @type color
 */
@property st-global(--wix-ui-tpa-date-picker-input-error-border-color);

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

/*
 * Input placeholder font
 * @type font
 */
@property st-global(--wix-ui-tpa-date-picker-placeholder-font);

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

.overrideStyleParams.root:newError {
  -st-mixin:
    setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-date-picker-input-error-color),
    setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-date-picker-input-error-message-min-height);
}

.overrideStyleParams .wsrDatePicker::popover::content {
  border-radius: var(--wix-ui-tpa-date-picker-input-border-radius, 0%);
  outline-color: createColor(--wix-ui-tpa-date-picker-input-border-color, (var(--wix-color-5), 0.4));
  outline-style: solid;
  outline-width: var(--wix-ui-tpa-date-picker-input-border-width, 1px);

  /* Without this local variable browser misbehaves and changes width of container... */
  --offset: var(--wix-ui-tpa-date-picker-input-border-width, 1px);

  outline-offset: calc(var(--offset) * -1);
  overflow: hidden;
}

.wsrDatePicker {
  -st-extends: WSRDatePicker;
  -st-mixin: calendar();
}

:global(#SITE_CONTAINER.focus-ring-active) .wsrDatePicker::calendar::day:focus {
  -st-mixin: focusRing();
}

:global(#SITE_CONTAINER.focus-ring-active) .wsrDatePicker::calendar::day:focus::after {
  display: none;
}

.wsrDatePicker::calendar::day:focus::after {
  display: none;
}

.overrideStyleParams {
  -st-mixin:
    setVar(--wix-ui-tpa-text-field-main-border-width, --wix-ui-tpa-date-picker-input-date-input-border-width, px, 1),
    setVar(--wix-ui-tpa-text-field-main-border-radius, --wix-ui-tpa-date-picker-input-date-input-border-radius, px, 0),
    setColor(--wix-ui-tpa-text-field-placeholder-color, --wix-ui-tpa-date-picker-input-date-input-placeholder-color, var(--wst-shade-3-color-rgb, var(--wix-color-4))),
    setFont(--wix-ui-tpa-text-field-placeholder-font, --wix-ui-tpa-date-picker-placeholder-font, null, '{ "family": "var(--wst-paragraph-2-font-family)", "size": "var(--wst-paragraph-2-font-size)" }'),
    setColor(--wix-ui-tpa-text-field-main-border-color, --wix-ui-tpa-date-picker-input-date-input-border-color, var(--wst-paragraph-2-color-rgb)),
    setColor(--wix-ui-tpa-text-field-main-background-color, --wix-ui-tpa-date-picker-input-date-input-bg-color, var(--wst-primary-background-color-rgb)),
    setColor(--wix-ui-tpa-text-field-main-text-color, --wix-ui-tpa-date-picker-input-date-input-text-color),
    setColor(--wix-ui-tpa-text-field-main-text-disabled-color, --wix-ui-tpa-date-picker-input-input-disabled-text-color, var(--wst-system-disabled-color-rgb, var(--wix-color-3))),
    setColor(--wix-ui-tpa-text-field-main-disabled-border-color, --wix-ui-tpa-date-picker-input-disabled-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-3))),
    setColor(--wix-ui-tpa-text-field-main-error-border-color, --wix-ui-tpa-date-picker-input-error-border-color, var(--wst-system-error-color-rgb)),
    setColor(--wix-ui-tpa-text-field-suffix-disabled-color, --wix-ui-tpa-date-picker-input-suffix-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-3))),
    setFont(--wix-ui-tpa-text-field-main-text-font, --wix-ui-tpa-date-picker-input-date-input-font),
    setColor(--wix-ui-tpa-text-field-error-color, --wix-ui-tpa-date-picker-input-error-color),
    setFont(--wix-ui-tpa-text-field-main-label-font, --wix-ui-tpa-date-picker-input-date-input-font, null, '{ "family": "var(--wst-paragraph-2-font-family)", "size": "var(--wst-paragraph-2-font-size)"}'),
    setColor(--wix-ui-tpa-text-field-main-label-text-color, --wix-ui-tpa-date-picker-input-main-label-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.overrideStyleParams .wsrDatePicker {
  -st-mixin:
    setColor(--wix-ui-tpa-date-picker-border-color, --wix-ui-tpa-date-picker-input-date-border-color),
    setColor(--wix-ui-tpa-date-picker-background-color, --wix-ui-tpa-date-picker-input-background-color),
    setColor(--wix-ui-tpa-date-picker-navigation-arrows-color, --wix-ui-tpa-date-picker-input-navigation-arrows-color),
    setColor(--wix-ui-tpa-date-picker-month-and-year-caption-color, --wix-ui-tpa-date-picker-input-month-and-year-caption-color),
    setColor(--wix-ui-tpa-date-picker-weekday-text-color, --wix-ui-tpa-date-picker-input-weekday-text-color),
    setColor(--wix-ui-tpa-date-picker-day-color, --wix-ui-tpa-date-picker-input-day-color),
    setColor(--wix-ui-tpa-date-picker-selected-day-color, --wix-ui-tpa-date-picker-input-selected-day-color),
    setColor(--wix-ui-tpa-date-picker-selected-day-bg-color, --wix-ui-tpa-date-picker-input-selected-day-bg-color),
    setVar(--wix-ui-tpa-date-picker-selected-day-border-radius, --wix-ui-tpa-date-picker-input-selected-day-border-radius),
    setColor(--wix-ui-tpa-date-picker-disabled-day-color, --wix-ui-tpa-date-picker-input-disabled-day-color),
    setFont(--wix-ui-tpa-date-picker-month-and-year-caption-font, --wix-ui-tpa-date-picker-input-month-and-year-caption-font),
    setFont(--wix-ui-tpa-date-picker-day-font, --wix-ui-tpa-date-picker-input-day-font),
    setVar(--wix-ui-tpa-date-picker-weeks-vertical-spacing, --wix-ui-tpa-date-picker-input-weeks-vertical-spacing),
    setVar(--wix-ui-tpa-date-picker-border-width, --wix-ui-tpa-date-picker-input-border-width),
}

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