@st-namespace 'CalendarCell-st-css';
@st-import [ --wix-color-4, --wix-color-5, --wix-color-8, --wix-color-1, --wix-color-2 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, setColor, setFont] from '../../common/formatters.st';

/*
 * The border width
 * @type size
 * @default 1px
 */
@property st-global(--wix-ui-tpa-calendar-cell-border-width);

/*
 * The font color of a day from a past month
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-calendar-cell-past-font-color);

/*
 * The font color for a day from the current month
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-calendar-cell-font-color);

/*
 * The font color of a day from a future month
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-calendar-cell-future-font-color);

/*
 * The background color for a day from the current month
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-calendar-cell-background-color);

/*
 * The background color of a day from a future month
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-calendar-cell-future-background-color);

/*
 * The background color of a day from a past month
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-calendar-cell-past-background-color);

/*
 * The border color for a day from the current month
 * @type color
 * @default --wix-color-2
 */
@property st-global(--wix-ui-tpa-calendar-cell-border-color);

/*
 * The color for today
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-calendar-cell-today-color);

/*
 * A day font
 * @type font
 * @default preset: 'Body-M' | overrides: { size:'16px' lineHeight: '1em'}
 */
@property st-global(--wix-ui-tpa-calendar-cell-font-style);

.innerContainer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 12px;
}

.root {
    -st-states:
        stretchable,
        current,
        alignment(enum(left, center, right)),
        timeType(enum(pastDate, today, futureDate));
    width: 100%;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
    position: relative;
    border: var(--wix-ui-tpa-calendar-cell-border-width, 1px) solid createColor(--wix-ui-tpa-calendar-cell-border-color, var(--wix-color-2));
    background-color: createColor(--wix-ui-tpa-calendar-cell-background-color, var(--wix-color-1));
}

.root:alignment(left) {
    text-align: left;
}

.root:alignment(center) {
    text-align: center;
}

.root:alignment(right) {
    text-align: right;
}

.root:timeType(pastDate) {
    background: createColor(--wix-ui-tpa-calendar-cell-past-background-color, var(--wix-color-1))
}

.root:timeType(pastDate) .title {
    -st-mixin: setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-calendar-cell-past-font-color, var(--wix-color-4)),
    setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-calendar-cell-font-style, 'Body-M', '{ "line-height": "1em", "size": "16px" }');
}

.root:timeType(futureDate) {
    background: createColor(--wix-ui-tpa-calendar-cell-future-background-color, var(--wix-color-1));
}

.root:timeType(futureDate) .title {
    -st-mixin: setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-calendar-cell-future-font-color, var(--wix-color-4)),
    setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-calendar-cell-font-style, 'Body-M', '{ "line-height": "1em", "size": "16px" }');
}

.root:current {
    background: createColor(--wix-ui-tpa-calendar-cell-background-color, var(--wix-color-1))
}

.root:current .title {
    -st-mixin:
        setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-calendar-cell-font-color, var(--wix-color-5)),
}

.root:timeType(today) {
    border-color: createColor(--wix-ui-tpa-calendar-cell-today-color, var(--wix-color-8));
}

.root:timeType(today) .title {
    -st-mixin: setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-calendar-cell-today-color, var(--wix-color-8)),
    setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-calendar-cell-font-style, 'Body-M', '{ "line-height": "1em", "size": "16px" }');
}

.root:stretchable {
    padding-top: 0;
    height: 100%;
}

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