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

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

:import {
    -st-from: "../IconButton/IconButton.deprecated.st.css";
    -st-default: TPAIconButton
}

/*Defaults*/
:vars {
    DefaultBackgroundColor: color-1;
    DefaultBorderColor: #fff;
    DefaultRadius: 2px;
    DefaultIconColor: color-5;
    DefaultPadding: 24px;
    DefaultIconPadding: 16px;
    DefaultTitleColor: color-5;
    DefaultTitleFont: "{theme: 'Body-M', size: '16px', lineHeight: '24px'}";
    DefaultWidth: 252px;
    ArrowWidth: 8px;
}

/*Overrides*/
:vars {
    BorderColor: --overridable;
    Radius: --overridable;
    IconColor: --overridable;
    HorizontalPadding: --overridable;
    VerticalPadding: --overridable;
    IconTopPadding: --overridable;
    IconRightPadding: --overridable;
    IconLeftPadding: --overridable;
    BackgroundColor: --overridable;
    Width: --overridable;
    TitleColor: --overridable;
    TitleFont: --overridable;
}

/*
 * Border color
 * @type color
 */
@property st-global(--wix-ui-tpa-calendar-popover-border-color);

/*
 * Radius
 * @type size
 */
@property st-global(--wix-ui-tpa-calendar-popover-radius);

/*
 * Icon color
 * @type color
 */
@property st-global(--wix-ui-tpa-calendar-popover-icon-color);

/*
 * Horizontal padding
 * @type size
 */
@property st-global(--wix-ui-tpa-calendar-popover-horizontal-padding);

/*
 * Vertical padding
 * @type size
 */
@property st-global(--wix-ui-tpa-calendar-popover-vertical-padding);

/*
 * Top padding
 * @type size
 */
@property st-global(--wix-ui-tpa-calendar-popover-icon-top-padding);

/*
 * Right padding
 * @type size
 */
@property st-global(--wix-ui-tpa-calendar-popover-icon-right-padding);

/*
 * Left padding
 * @type size
 */
@property st-global(--wix-ui-tpa-calendar-popover-icon-left-padding);

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-calendar-popover-background-color);

/*
 * Width
 * @type size
 */
@property st-global(--wix-ui-tpa-calendar-popover-width);

/*
 * Title color
 * @type color
 */
@property st-global(--wix-ui-tpa-calendar-popover-title-color);

/*
 * Title font
 * @type font
 */
@property st-global(--wix-ui-tpa-calendar-popover-title-font);

/*Fallbacks*/
:vars {
    CurrentBorderColor: color(fallback(value(BorderColor), value(DefaultBorderColor)));
    CurrentRadius: fallback(value(Radius), value(DefaultRadius));
    CurrentIconColor: color(fallback(value(IconColor), value(DefaultIconColor)));
    CurrentHorizontalPadding: fallback(value(HorizontalPadding), value(DefaultPadding));
    CurrentVerticalPadding: fallback(value(VerticalPadding), value(DefaultPadding));
    CurrentIconTopPadding: fallback(value(IconTopPadding), value(DefaultIconPadding));
    CurrentIconRightPadding: fallback(value(IconRightPadding), value(DefaultIconPadding));
    CurrentIconLeftPadding: fallback(value(IconLeftPadding), value(DefaultIconPadding));
    CurrentBackgroundColor: color(fallback(value(BackgroundColor), value(DefaultBackgroundColor)));
    CurrentTitleColor: color(fallback(value(TitleColor), value(DefaultTitleColor)));
    CurrentTitleFont: fallback(value(TitleFont), font(value(DefaultTitleFont)));
    CurrentWidth: fallback(value(Width), value(DefaultWidth));
}

.root {
    -st-states: rtl, withArrow, withShadow, isShown, animated, arrowSide(enum(left, right));
    box-sizing: border-box;
    border-radius: value(CurrentRadius);
    border: 1px solid applyOpacity(value(CurrentBorderColor), 0.2);
    position: relative;
    min-height: 224px;
    max-height: 364px;
    width: value(CurrentWidth);
    background-color: value(CurrentBackgroundColor);
    z-index: 2;
    display: none;
}

.contentContainer {
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: value(CurrentVerticalPadding);
    padding-right: value(CurrentHorizontalPadding);
    padding-bottom: value(CurrentVerticalPadding);
    padding-left: value(CurrentHorizontalPadding);
}

.content {
    margin-top: 16px;
    overflow-y: auto;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.title {
    -st-mixin: TPAText(
            MainTextFont value(CurrentTitleFont),
            MainTextColor value(CurrentTitleColor)
    );
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

.arrow {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    z-index: 3;
    border-top: value(ArrowWidth) solid transparent;
    border-bottom: value(ArrowWidth) solid transparent;
}

.arrowBorder {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    z-index: 1;
}

.close {
    position: absolute;
    top: value(CurrentIconTopPadding);
    right: value(CurrentIconRightPadding);
    -st-mixin: TPAIconButton(IconColor value(CurrentIconColor));
}

.root:isShown {
    display: flex;
}

.root:animated:isShown {
    animation: bounce-in 0.2s ease 0s 1 normal ;
    animation-fill-mode: forwards;
}

.root:withShadow {
    box-shadow: 0 0 25px 10px rgba(80, 80, 80, 0.1), 0 4px 50px 0 rgba(209, 209, 209, 0.1);
}

.root:arrowSide(left) .arrow {
    left: calc(-1 * value(ArrowWidth));
    border-left: 0;
    border-right: value(ArrowWidth) solid value(CurrentBackgroundColor);
}

.root:arrowSide(left) .arrowBorder {
    left: calc((-1 * value(ArrowWidth)) - 1px);
    border-left: 0;
    border-right: value(ArrowWidth) solid applyOpacity(value(CurrentBorderColor), 0.2);
}

.root:withArrow .arrow {
    display: block;
}

.root:withArrow .arrowBorder {
    display: block;
}

.root:arrowSide(right) .arrow {
    border-left: value(ArrowWidth) solid value(CurrentBackgroundColor);
    border-right: 0;
    left: 250px;
}

.root:arrowSide(right) .arrowBorder {
    border-left: value(ArrowWidth) solid applyOpacity(value(CurrentBorderColor), 0.2);
    border-right: 0;
    left: 251px;
}

.root:rtl .close {
    left: value(CurrentIconLeftPadding);
    right: initial;
}

.root:rtl {
    text-align: right;
}

@keyframes bounce-in {
    0%{
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        opacity: 0;
    }
    50%{
        transform: scale(1.03);
        -webkit-transform: scale(1.03);
        opacity: 0.32;
    }
    100%{
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
}


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