@st-namespace 'CalendarPopover-st-css';
@st-import [ --wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createFont, createColor, setFont, setVar, setColor ] from "../../common/formatters.st";

/*
 * 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
 * @playground {"max": 580}
 */
@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);

.root {
    -st-states: rtl, withArrow, withShadow, isShown, animated, arrowSide(enum(left, right));
    box-sizing: border-box;
    border-radius: var(--wix-ui-tpa-calendar-popover-radius, 2px);
    border: 1px solid createColor(--wix-ui-tpa-calendar-popover-border-color, '255, 255, 255', 0.2);
    position: relative;
    min-height: 224px;
    max-height: 364px;
    width: var(--wix-ui-tpa-calendar-popover-width, 252px);
    background-color: createColor(--wix-ui-tpa-calendar-popover-background-color, var(--wix-color-1));
    z-index: 2;
    display: none;
}

.contentContainer {
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: var(--wix-ui-tpa-calendar-popover-vertical-padding, 24px);
    padding-right: var(--wix-ui-tpa-calendar-popover-icon-right-padding, 16px);
    padding-bottom: var(--wix-ui-tpa-calendar-popover-vertical-padding, 24px);
    padding-left: var(--wix-ui-tpa-calendar-popover-horizontal-padding, 24px);
}

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

.title {
    -st-mixin: setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-calendar-popover-title-font, 'Body-M', '{"size": "16px", "line-height": "24px"}'),
    setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-calendar-popover-title-color, --wix-color-5);
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

.arrow {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    z-index: 3;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

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

.close {
    position: absolute;
    top: var(--wix-ui-tpa-calendar-popover-icon-top-padding, 16px);
    right: var(--wix-ui-tpa-calendar-popover-icon-right-padding, 16px);
    -st-mixin: setColor(--wix-ui-tpa-icon-button-icon-color, --wix-ui-tpa-calendar-popover-icon-color, --wix-color-5);
}

.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 * 8px);
    border-left: 0;
    border-right: 8px solid createColor(--wix-ui-tpa-calendar-popover-background-color, var(--wix-color-1));
}

.root:arrowSide(left) .arrowBorder {
    left: calc((-1 * 8px) - 1px);
    border-left: 0;
    border-right: 8px solid createColor(--wix-ui-tpa-calendar-popover-border-color, '255, 255, 255', 0.2);
}

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

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

.root:arrowSide(right) .arrow {
    border-left: 8px solid createColor(--wix-ui-tpa-calendar-popover-background-color, var(--wix-color-1));
    border-right: 0;
    left: 250px;
}

.root:arrowSide(right) .arrowBorder {
    border-left: 8px solid createColor(--wix-ui-tpa-calendar-popover-border-color, '255, 255, 255', 0.2);
    border-right: 0;
    left: 251px;
}

.root:rtl .close {
    left: var(--wix-ui-tpa-calendar-popover-icon-left-padding, 16px);
    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.st.css" */