import styled from "styled-components";
import { popoverClasses } from "../../../Popover";
import { addFocus } from "../../../../mixins";
import { classes, innerTokens, tokens } from "../../Calendar.tokens";
import { addActive, addSelected, flexCenter } from "../../mixins";
const inRange = ()=>`
    &:before {
        content: '';
        z-index: -1;
        position: absolute;
        width: 100%;
        height: calc(100% - 0.125rem);
        background: var(${tokens.calendarRangeBackground});
    }
`;
const sideInRange = ()=>`
    &:before {
        content: '';
        z-index: -1;
        position: absolute;
        width: 0.75rem;
        height: calc(100% - 0.125rem);
        background: var(${tokens.calendarRangeBackground});
    }
`;
export const StyledItem = styled.div.withConfig({
    displayName: "DateStructureItem.styles__StyledItem",
    componentId: "sc-74a7c0c6-0"
})([
    `border-radius:calc(var(`,
    `) - 0.125rem);`,
    `;&.`,
    `{`,
    `;}&.`,
    `{`,
    `;}&.`,
    `{&:before{left:`,
    `;}}&.`,
    `{&:before{right:`,
    `;}}`
], innerTokens.dateStructureBorderRadius, String(flexCenter), String(classes.inRange), inRange(), String(classes.sideInRange), sideInRange(), String(classes.sideLeft), ({ offset })=>`${offset}px`, String(classes.sideRight), ({ offset })=>`${offset}px`);
const disabledItem = ()=>`
    cursor: not-allowed;
    opacity: var(${tokens.calendarDisabledOpacity});
`;
const disabledCurrentItem = ()=>`
    ${disabledItem()};
`;
export const StyledItemRoot = styled.div.withConfig({
    displayName: "DateStructureItem.styles__StyledItemRoot",
    componentId: "sc-74a7c0c6-1"
})([
    `font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);position:relative;box-sizing:border-box;border-radius:var(`,
    `);`,
    `;color:`,
    `;&.`,
    `{`,
    `;`,
    `;&.`,
    `{`,
    `;}}&.`,
    `:not(.`,
    `){`,
    `;}&.`,
    `{color:var(`,
    `);}&.`,
    `{color:`,
    `;`,
    `;}&.`,
    `{color:`,
    `;`,
    `;}&.`,
    `{& > .`,
    `:before{width:calc(100% + 2px);height:100%;}& > .`,
    `:before{width:100%;right:-1px;left:unset;}& > .`,
    `:before{width:100%;left:-1px;right:unset;}}& .`,
    `.`,
    `{z-index:-1;width:100%;}`
], innerTokens.dateStructureFontFamily, innerTokens.dateStructureFontSize, innerTokens.dateStructureFontStyle, innerTokens.dateStructureFontWeight, innerTokens.dateStructureFontLetterSpacing, innerTokens.dateStructureFontLineHeight, innerTokens.dateStructureBorderRadius, String(flexCenter), ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${tokens.calendarContentPrimaryColor})` : `var(${tokens.calendarContentSecondaryColor})`, String(classes.selectableItem), addSelected({
    minWidth: 'calc(100% - 0.125rem)',
    minHeight: 'calc(100% - 0.125rem)',
    selectedFontWeight: `var(${innerTokens.dateStructureSelectedFontWeight})`,
    selectedBackground: `var(${tokens.calendarSelectedItemBackground})`,
    selectedColor: `var(${tokens.calendarSelectedItemColor})`,
    selectableBackgroundHover: `var(${tokens.calendarSelectableItemBackgroundHover})`,
    currentBorderColor: `var(${tokens.calendarCurrentItemBorderColor})`,
    currentBorderWidth: `var(${tokens.calendarCurrentItemBorderWidth})`,
    activeBackground: `var(${tokens.calendarActiveItemBackground})`,
    activeColor: `var(${tokens.calendarActiveItemColor})`
}), addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.125rem',
    outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
    outlineRadius: `var(${innerTokens.dateStructureBorderRadius})`
}), classes.currentItem, addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.1875rem',
    outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
    outlineRadius: `var(${innerTokens.dateStructureBorderRadius})`
}), classes.dayInCurrentMonth, classes.disabled, addActive({
    activeBackground: `var(${tokens.calendarActiveItemBackground})`,
    activeColor: `var(${tokens.calendarActiveItemColor})`,
    activeFontWeight: `var(${innerTokens.dateStructureSelectedFontWeight})`
}), classes.dayOfWeek, tokens.calendarDayOfWeekColor, classes.disabled, ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${tokens.calendarContentPrimaryDisabledColor})` : `var(${tokens.calendarContentSecondaryDisabledColor})`, disabledItem(), classes.disabledCurrent, ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${tokens.calendarContentPrimaryDisabledColor})` : `var(${tokens.calendarContentSecondaryDisabledColor})`, disabledCurrentItem(), classes.currentItem, classes.inRange, classes.sideRight, classes.sideLeft, popoverClasses.wrapper, popoverClasses.targetAsRef);
export const StyledEvents = styled.div.withConfig({
    displayName: "DateStructureItem.styles__StyledEvents",
    componentId: "sc-74a7c0c6-2"
})([
    `display:flex;position:absolute;bottom:var(`,
    `,0.25rem);`
], tokens.calendarEventItemBottom);
export const StyledEvent = styled.div.withConfig({
    displayName: "DateStructureItem.styles__StyledEvent",
    componentId: "sc-74a7c0c6-3"
})([
    `margin:0 0.063rem;width:0.188rem;height:0.188rem;border-radius:50%;background-color:`,
    `;`
], ({ color = 'var(--plasma-colors-accent, var(--surface-accent))' })=>color);
