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

:import {
  -st-from: "../internal/WixUiCoreComponents/components/CorePopover/CorePopover.st.css";
  -st-default: Popover;
  -st-named: arrow, popover, popoverContent;
}

/* Defaults - default params */
:vars {
  defaultBackgroundColor: color(color-1);
  defaultBorderColor: rgba(255, 255, 255, .4);
  defaultBorderRadius: 0;
  defaultPadding: 20px;
}

/* Overrides - deceleration of overridable parameters by the consumer */
:vars {
  /*
    Main background color
    @default color-1
  */
  BackgroundColor: --overridable;
  /*
    Main border color
    @default rgba(255, 255, 255, .4)
  */
  BorderColor: --overridable;
  /*
    Main border radius
    @default 0
  */
  BorderRadius: --overridable;
  /*
    Main content block padding
    @default 20px
  */
  Padding: --overridable;
}

/*
 * Main background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-popover-background-color);

/*
 * Main border color
 * @type color
 * @default rgba(255, 255, 255, .4)
 */
@property st-global(--wix-ui-tpa-popover-border-color);

/*
 * Main border radius
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-popover-border-radius);

/*
 * Main content block padding
 * @type size
 * @default 20px
 */
@property st-global(--wix-ui-tpa-popover-padding);

:vars {
  backgroundColor: color(fallback(value(BackgroundColor), value(defaultBackgroundColor)));
  borderColor: color(fallback(value(BorderColor), value(defaultBorderColor)));
  borderRadius: fallback(value(BorderRadius), value(defaultBorderRadius));
  padding: fallback(value(Padding), value(defaultPadding));
}

.root {
  -st-states: wired;
  -st-extends: Popover;
}

.root .popoverContent {
  border: 0;
  padding: value(padding);
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.1);
  min-width: 40px;
  max-width: 320px;
  min-height: 20px;
}

.root .popover .arrow {
  border-color: transparent;
}

.root:wired .popover .arrow::after,
.root:wired .popover .arrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  transform: rotate(45deg);
}

.root .popover .arrow::before {
  z-index: -1;
}

.root:wired.overrideStyleParams .popover[data-placement*="right"] .arrow::before {
  box-shadow: 5px -5px 0 6px value(borderColor);
}

.root:wired.overrideStyleParams .popover[data-placement*="right"] .arrow::after {
  box-shadow: 5px -5px 0 5px value(backgroundColor);
}

.root:wired.overrideStyleParams .popover[data-placement*="left"] .arrow::before {
  box-shadow: -5px 5px 0 6px value(borderColor);
}

.root:wired.overrideStyleParams .popover[data-placement*="left"] .arrow::after {
  box-shadow: -5px 5px 0 5px value(backgroundColor);
}

.root:wired.overrideStyleParams .popover[data-placement*="top"] .arrow::before {
  box-shadow: -5px -5px 0 6px value(borderColor);
}

.root:wired.overrideStyleParams .popover[data-placement*="top"] .arrow::after {
  box-shadow: -5px -5px 0 5px value(backgroundColor);
}

.root:wired.overrideStyleParams .popover[data-placement*="bottom"] .arrow::before {
  box-shadow: 5px 5px 0 6px value(borderColor);
}

.root:wired.overrideStyleParams .popover[data-placement*="bottom"] .arrow::after {
  box-shadow: 5px 5px 0 5px value(backgroundColor);
}

.root .popover[data-placement*="right"] .arrow {
  border-right-color: #fff;
}

.root .popover[data-placement*="left"] .arrow {
  border-left-color: #fff;
}

.root .popover[data-placement*="bottom"] .arrow {
  border-bottom-color: #fff;
}

.root .popover[data-placement*="top"] .arrow {
  border-top-color: #fff;
}

.root:wired .popoverContent,
.root:wired.overrideStyleParams .popoverContent {
  padding: value(padding);
  background-color: value(backgroundColor);
  border-color: value(borderColor);
  border-radius: value(borderRadius);
  border-width: 1px;
  border-style: solid;
}

.root:wired .popover[data-placement*="right"] .arrow,
.root:wired.overrideStyleParams .popover[data-placement*="right"] .arrow {
  border-right-color: value(backgroundColor);
}

.root:wired .popover[data-placement*="left"] .arrow,
.root:wired.overrideStyleParams .popover[data-placement*="left"] .arrow {
  border-left-color: value(backgroundColor);
}

.root:wired .popover[data-placement*="bottom"] .arrow,
.root:wired.overrideStyleParams .popover[data-placement*="bottom"] .arrow {
  border-bottom-color: value(backgroundColor);
}

.root:wired .popover[data-placement*="top"] .arrow,
.root:wired.overrideStyleParams .popover[data-placement*="top"] .arrow {
  border-top-color: value(backgroundColor);
}

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