:import {
  -st-from: "wix-ui-core/index.st.css";
  -st-named: Popover;
}

:import {
  -st-from: "./FloatingHelperContent/FloatingHelperContent.st.css";
  -st-default: FloatingHelperContent;
}

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

:import {
  -st-from: "../Button/Button.st.css";
  -st-default: Button;
}

:import {
  -st-from: "../../colors.st.css";
  -st-named: D80, WHITE;
}

:import {
  -st-from: "../../shadows.st.css";
  -st-named: shadow30;
}

:vars {
  /* TODO: create and use a fade function */

  /** background color D10 with opacity 0.95 */
  backgroundColorDark: rgba(22,45,61,0.95);
  backgroundColorLight: value(D80);
  closeButtonPadding: 6px;
}

.root {
  -st-states: bounce, placement-right, placement-left, placement-top, placement-bottom, appearance(enum(dark,light));
  -st-extends: Popover;
}

.root:appearance(dark) {
  -st-mixin: Popover(
    contentBorderColor value(backgroundColorDark),
    contentBackgroundColor value(backgroundColorDark),
    contentBorderWidth 0,
    contentBorderRadius 8px,
    contentPadding 0 0
    );
}

.root:appearance(light) {
  -st-mixin: Popover(
    contentBorderColor value(backgroundColorLight),
    contentBackgroundColor value(backgroundColorLight),
    contentBorderWidth 0,
    contentBorderRadius 8px,
    contentPadding 0 0
    );
}

.root::arrow {
  z-index: 2;
}

/* popoverContent and innerContent are taken from Tooltip.tooltipContent,
 * but I split them.
*/
.root::popoverContent {
  position: relative;
  box-sizing: border-box;
  box-shadow: value(shadow30);
}

.closeButton {
  position: absolute;
  top: value(closeButtonPadding);

  /* default dir=ltr */
  right: value(closeButtonPadding);
  left: initial;
}

:global([dir="rtl"]) .closeButton {
  right: initial;
  left: value(closeButtonPadding);
}

.innerContent {
  padding: 30px 36px;
  color: value(WHITE);
}