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

:import {
    -st-from: "../internal/WixUiCoreComponents/components/CoreTooltip/CoreTooltip.st.css";
    -st-default: Tooltip;
}

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: errorColor;
}

:import {
    -st-from: "../../common/fonts.st.css";
    -st-named: fontFamily;
}

/*Defaults*/
:vars {
    DefaultWiredTextColor: color(color-1);
    DefaultWiredBackgroundColor: color(color-5);
}

/*Overrides*/
:vars {
    BackgroundColor: --overridable;
    TextColor: --overridable;
    BorderColor: --overridable;
}

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

/*
 * Text color
 * @type color
 */
@property st-global(--wix-ui-tpa-tooltip-text-color);

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

:vars {
    WiredTextColor: color(fallback(value(TextColor), value(DefaultWiredTextColor)));
    WiredBackgroundColor: color(fallback(value(BackgroundColor), value(DefaultWiredBackgroundColor)));
    WiredBorderColor: color(fallback(value(BorderColor), value(WiredBackgroundColor)));
}

.root {
    -st-extends: Tooltip;
    -st-states: skin(enum(standard, error, wired));
}

.root[data-hook="popover-portal"] {
    display: initial;
}

.root::popoverContent {
    background-color: #212121;
    padding: 4px 12px;
    border: 1px #757575 solid;
    border-radius: 3px;
    color: white;
    line-height: 20px;
    font-family: value(fontFamily);
    font-size: 14px;
    -webkit-font-smoothing: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.1);
}

.tpaArrow {
    display: block;
    position: absolute;
    margin: 0;
}

.tpaArrow svg {
    display: block;
}

.root::popover[data-placement*="top"].withArrow { padding-bottom: 6px; }
.root::popover[data-placement*="bottom"].withArrow { padding-top: 6px; }
.root::popover[data-placement*="left"].withArrow { padding-right: 6px; }
.root::popover[data-placement*="right"].withArrow { padding-left: 6px; }

.root::popover[data-placement*="top"] .tpaArrow {
    bottom: -1px;
    width: 12px;
    height: 7px;
}

.root::popover[data-placement*="bottom"] .tpaArrow {
    top: -1px;
    width: 12px;
    height: 7px;
}

.root::popover[data-placement*="left"] .tpaArrow {
    right: -1px;
    width: 7px;
    height: 12px;
}

.root::popover[data-placement*="right"] .tpaArrow {
    left: -1px;
    width: 7px;
    height: 12px;
}

.root::popover[data-placement*="top"].popoverAnimation-enter {
    opacity: 0;
    transform: scale(0.9) translateY(3px);
}

.root::popover[data-placement*="bottom"].popoverAnimation-enter {
    opacity: 0;
    transform: scale(0.9) translateY(-3px);
}

.root::popover[data-placement*="left"].popoverAnimation-enter {
    opacity: 0;
    transform: scale(0.9) translateX(10px);
}

.root::popover[data-placement*="right"].popoverAnimation-enter {
    opacity: 0;
    transform: scale(0.9) translateX(-10px);
}

.root::popover[data-placement].popoverAnimation-enter.popoverAnimation-enter-active {
    opacity: 1;
    transition: transform 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94), applyOpacity 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1) translateY(0) translateX(0);
}

.root::popover[data-placement].popoverAnimation-exit {
    opacity: 1;
    transform: scale(1) translateY(0) translateX(0);
}

.root::popover[data-placement].popoverAnimation-exit.popoverAnimation-exit-active {
    opacity: 0;
    transition: transform 80ms linear, applyOpacity 80ms linear;
}

.root:skin(error)::popoverContent {
    background-color: value(errorColor);
    border: 1px solid rgba(255,255,255,0.25);
}

.root:skin(wired)::popoverContent {
    background-color: value(WiredBackgroundColor);
    color: value(WiredTextColor);
    border-color: value(WiredBorderColor);
}

.root:skin(wired) .tpaArrow path {
    fill: value(WiredBackgroundColor);
    stroke: value(WiredBorderColor);
}

.root:skin(wired) .tpaArrow path:first-child {
    stroke: none;
}

.root:skin(wired) .tpaArrow path:last-child {
    stroke-dasharray: 0 17 17;
}

.root:skin(error) .tpaArrow path {
    fill: value(errorColor);
}

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