import styled from "styled-components";
import { calendarDoubleConfig, withRange, calendarBaseConfig, calendarBaseTokens } from "../../../Calendar";
import { component, mergeConfig } from "../../../../engines";
import { privateTokens, tokens } from "../../DatePicker.tokens";
import { baseCalendarTokens } from "../../DatePickerBase.styles";
const mergedCalendarDoubleConfig = mergeConfig(calendarDoubleConfig);
const CalendarDouble = component(mergedCalendarDoubleConfig);
const mergedCalendarConfig = mergeConfig(calendarBaseConfig);
const Calendar = component(mergedCalendarConfig);
const CalendarDoubleRange = withRange(CalendarDouble);
const CalendarRange = withRange(Calendar);
// NOTE: переопределение токенов Calendar
export const StyledCalendarDouble = styled(CalendarDoubleRange).withConfig({
    displayName: "RangeDatePopover.styles__StyledCalendarDouble",
    componentId: "sc-d6eddedb-0"
})([
    ``,
    `:calc(var(`,
    `) * 2 + 2.063rem);flex-shrink:`,
    `;width:`,
    `;height:`,
    `;`,
    ` `,
    `:var(`,
    `);`
], privateTokens.calendarDoubleWidth, tokens.calendarWidth, ({ innerWidth })=>innerWidth && innerWidth !== '0' ? '1' : '0', ({ innerWidth })=>innerWidth && innerWidth !== '0' ? '100%' : `var(${privateTokens.calendarDoubleWidth})`, ({ innerHeight })=>innerHeight && innerHeight !== '0' ? '100%' : `var(${tokens.calendarHeight})`, baseCalendarTokens, calendarBaseTokens.calendarSeparatorBackground, tokens.popoverSeparatorBackground);
export const StyledCalendar = styled(CalendarRange).withConfig({
    displayName: "RangeDatePopover.styles__StyledCalendar",
    componentId: "sc-d6eddedb-1"
})([
    `flex-shrink:`,
    `;width:`,
    `;height:`,
    `;`,
    ``
], ({ innerWidth })=>innerWidth && innerWidth !== '0' ? '1' : '0', ({ innerWidth })=>innerWidth && innerWidth !== '0' ? '100%' : `var(${tokens.calendarWidth})`, ({ innerHeight })=>innerHeight && innerHeight !== '0' ? '100%' : `var(${tokens.calendarHeight})`, baseCalendarTokens);
