import styled from "styled-components";
import { component, mergeConfig } from "../../../../engines";
import { addFocus } from "../../../../mixins";
import { classes, tokens } from "../../Calendar.tokens";
import { iconButtonConfig, iconButtonTokens } from "../../../IconButton";
import { flexCenter } from "../../mixins";
import { IconDisclosureDownFill } from "../../../_Icon";
const mergedIconButtonConfig = mergeConfig(iconButtonConfig);
const IconButton = component(mergedIconButtonConfig);
export const StyledCalendarHeader = styled.div.withConfig({
    displayName: "CalendarHeader.styles__StyledCalendarHeader",
    componentId: "sc-e20b4c86-0"
})([
    `display:flex;justify-content:space-between;align-items:center;padding:var(`,
    `);`
], tokens.calendarHeaderWrapperPadding);
export const StyledHeader = styled.button.withConfig({
    displayName: "CalendarHeader.styles__StyledHeader",
    componentId: "sc-e20b4c86-1"
})([
    `border:none;background-color:transparent;padding:0;outline:none;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);padding:var(`,
    `);color:var(`,
    `);cursor:pointer;display:flex;gap:var(`,
    `);justify-content:space-between;align-items:center;&:hover,&:active{color:var(`,
    `);}`,
    `;`
], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderPadding, tokens.calendarContentPrimaryColor, tokens.calendarHeaderDateGap, tokens.calendarContentSecondaryColor, addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.125rem',
    outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
    outlineRadius: '0.563rem'
}));
export const StyledHeaderDate = styled.span.withConfig({
    displayName: "CalendarHeader.styles__StyledHeaderDate",
    componentId: "sc-e20b4c86-2"
})([
    ``,
    `;pointer-events:none;`
], flexCenter);
export const StyledArrows = styled.div.withConfig({
    displayName: "CalendarHeader.styles__StyledArrows",
    componentId: "sc-e20b4c86-3"
})([
    `display:flex;gap:var(`,
    `);padding:var(`,
    `);`
], tokens.calendarHeaderArrowGap, tokens.calendarHeaderArrowPadding);
// NOTE: переопределение токенов IconButton
export const StyledArrow = styled(IconButton).withConfig({
    displayName: "CalendarHeader.styles__StyledArrow",
    componentId: "sc-e20b4c86-4"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);&.`,
    `{cursor:not-allowed;opacity:0.4;&:hover,&:active{color:var(`,
    `);}}`
], iconButtonTokens.iconButtonColor, tokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, tokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, tokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonHeight, tokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, tokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, tokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, tokens.iconButtonRadius, iconButtonTokens.iconButtonFocusColor, tokens.iconButtonFocusColor, classes.disabledPrevButton, tokens.iconButtonColor);
export const StyledNavigation = styled.div.withConfig({
    displayName: "CalendarHeader.styles__StyledNavigation",
    componentId: "sc-e20b4c86-5"
})([
    `width:100%;`,
    `;`
], flexCenter);
export const StyledDoubleHeaderWrapper = styled.div.withConfig({
    displayName: "CalendarHeader.styles__StyledDoubleHeaderWrapper",
    componentId: "sc-e20b4c86-6"
})([
    `width:100%;display:grid;align-items:center;grid-template-columns:var(`,
    `) 1fr var(`,
    `);grid-template-areas:'a b c';`,
    `{grid-area:a;}&.`,
    ` `,
    `{grid-area:c;}`
], tokens.iconButtonWidth, tokens.iconButtonWidth, StyledArrow, classes.doubleHeaderLastDateWrapper, StyledArrow);
export const StyledHeaderDouble = styled.button.withConfig({
    displayName: "CalendarHeader.styles__StyledHeaderDouble",
    componentId: "sc-e20b4c86-7"
})([
    `border:none;background-color:transparent;padding:0;outline:none;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);color:var(`,
    `);grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(`,
    `);justify-content:space-between;align-items:center;margin:0;height:fit-content;`,
    `;`,
    `;`
], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarContentPrimaryColor, tokens.calendarHeaderDateGap, String(flexCenter), addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.125rem',
    outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
    outlineRadius: '0.563rem'
}));
export const StyledHeaderArrow = styled(IconDisclosureDownFill).withConfig({
    displayName: "CalendarHeader.styles__StyledHeaderArrow",
    componentId: "sc-e20b4c86-8"
})([
    `color:var(`,
    `);`
], tokens.calendarHeaderArrowColor);
