@st-namespace 'CalendarCell-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback, font, applyOpacity;
}

:import {
    -st-from: "../Text/Text.deprecated.st.css";
    -st-default: TPAText;
}

/*Defaults*/
:vars {
    DefaultBorderWidth: 1px;
    DefaultPastFontColor: color-4;
    DefaultFontColor: color-5;
    DefaultFutureFontColor: color-4;
    DefaultBackgroundColor: color-1;
    DefaultBorderColor: color-2;
    DefaultTodayColor: color-8;
    DefaultFontSize: 16px;
    DefaultFontStyle: "{theme: 'Body-M', size:'16px' lineHeight: '1em'}";
}

/*Overrides*/
:vars {
    /*
        The border width
        @default 1px
    */
    BorderWidth: --overridable;
    /*
        The font color of a day from a past month
        @default color-4
    */
    PastFontColor: --overridable;
    /*
        The font color for a day from the current month
        @default color-5
    */
    FontColor: --overridable;
    /*
        The font color of a day from a future month
        @default color-4
    */
    FutureFontColor: --overidable;
    /*
        The background color for a day from the current month
        @default color-1
    */
    BackgroundColor: --overridable;
    /*
        The background color of a day from a future month
        @default color-1
    */
    FutureBackgroundColor: --overridable;
    /*
        The background color of a day from a past month
        @default color-1
    */
    PastBackgroundColor: --overridable;
    /*
        The border color for a day from the current month
        @default color-2
    */
    BorderColor: --overridable;
    /*
        The color for today
        @default color-8
    */
    TodayColor: --overridable;
    /*
        A day font
        @default {theme: 'Body-M', size:'16px' lineHeight: '1em'}
    */
    FontStyle: --overridable;
    /*
        A day font size
        @default 16px
    */
    FontSize: --overridable;
}

/*
 * 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);

:vars {
    CurrentBorderWidth: fallback(value(BorderWidth), value(DefaultBorderWidth));
    CurrentPastFontColor: color(fallback(value(PastFontColor), value(DefaultPastFontColor)));
    CurrentFontColor: color(fallback(value(FontColor), value(DefaultFontColor)));
    CurrentFutureFontColor: color(fallback(value(FutureFontColor), value(DefaultFutureFontColor)));
    CurrentPastBackgroundColor: color(fallback(value(PastBackgroundColor), value(DefaultBackgroundColor)));
    CurrentBackgroundColor: color(fallback(value(BackgroundColor), value(DefaultBackgroundColor)));
    CurrentFutureBackgroundColor: color(fallback(value(FutureBackgroundColor), value(DefaultBackgroundColor)));
    CurrentBorderColor: color(fallback(value(BorderColor), value(DefaultBorderColor)));
    CurrentTodayColor: color(fallback(value(TodayColor), value(DefaultTodayColor)));
    CurrentFontStyle: fallback(value(FontStyle), font(value(DefaultFontStyle)));
    CurrentFontSize: fallback(value(FontSize), value(DefaultFontSize));
}

.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: value(CurrentBorderWidth) solid value(CurrentBorderColor);
    background-color: value(CurrentBackgroundColor);
}

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


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

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

.title {
    -st-extends: TPAText;
    -st-mixin: TPAText(MainTextColor value(CurrentFontColor),
    MainTextFont value(CurrentFontStyle));
    font-size: value(CurrentFontSize);
    line-height: 1em;
}

.root:timeType(pastDate) {
    background: value(CurrentPastBackgroundColor)
}

.root:timeType(pastDate) .title {
    -st-mixin: TPAText(MainTextColor value(CurrentPastFontColor), MainTextFont value(CurrentFontStyle));
}

.root:timeType(futureDate){
    background: value(CurrentFutureBackgroundColor);
}

.root:timeType(futureDate) .title {
    -st-mixin: TPAText(MainTextColor value(CurrentFutureFontColor), MainTextFont value(CurrentFontStyle));
}

.root:current {
    background: value(CurrentBackgroundColor)
}

.root:current .title {
    -st-mixin: TPAText(MainTextColor value(CurrentFontColor), MainTextFont value(CurrentFontStyle));
}

.root:timeType(today) {
    border-color: value(CurrentTodayColor);
}

.root:timeType(today) .title {
    -st-mixin: TPAText(MainTextColor value(CurrentTodayColor), MainTextFont value(CurrentFontStyle));
}

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

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