@st-namespace 'Popover-st-css';
@st-import [ --wix-color-1 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor ] from '../../common/formatters.st';
@st-import Popover, [ arrow, popover, popoverContent ] from '../internal/WixUiCoreComponents/components/CorePopover/CorePopover.st.css';
@st-import [ --wst-primary-background-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

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

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

/*
 * Border color opacity
 * @type opacity
 * @default 40%
 */
@property st-global(--wix-ui-tpa-popover-border-color-opacity);

/*
 * Main border radius(0-30)
 * @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);

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

  --fallback-color: 255, 255, 255, 0.4;
}

.root .popoverContent {
  border: 0;
  padding: var(--wix-ui-tpa-popover-padding, 20px);
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgb(0, 0, 0, 0.12), 0 0 4px 0 rgb(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 .popover[data-placement*="right"] .arrow::before {
  box-shadow: 5px -5px 0 6px createColor(--wix-ui-tpa-popover-border-color, (var(--wst-primary-background-color-rgb, var(--fallback-color))), var(--wix-ui-tpa-popover-border-color-opacity, 1));
}

.root:wired .popover[data-placement*="right"] .arrow::after {
  box-shadow: 5px -5px 0 5px createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.root:wired .popover[data-placement*="left"] .arrow::before {
  box-shadow: -5px 5px 0 6px createColor(--wix-ui-tpa-popover-border-color, (var(--wst-primary-background-color-rgb, var(--fallback-color))), var(--wix-ui-tpa-popover-border-color-opacity, 1));
  }

.root:wired .popover[data-placement*="left"] .arrow::after {
  box-shadow: -5px 5px 0 5px createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.root:wired .popover[data-placement*="top"] .arrow::before {
  box-shadow: -5px -5px 0 6px createColor(--wix-ui-tpa-popover-border-color, (var(--wst-primary-background-color-rgb, var(--fallback-color))), var(--wix-ui-tpa-popover-border-color-opacity, 1));
}

.root:wired .popover[data-placement*="top"] .arrow::after {
  box-shadow: -5px -5px 0 5px createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.root:wired .popover[data-placement*="bottom"] .arrow::before {
  box-shadow: 5px 5px 0 6px createColor(--wix-ui-tpa-popover-border-color, (var(--wst-primary-background-color-rgb, var(--fallback-color))), var(--wix-ui-tpa-popover-border-color-opacity, 1));
}

.root:wired .popover[data-placement*="bottom"] .arrow::after {
  box-shadow: 5px 5px 0 5px createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.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 {
  padding: var(--wix-ui-tpa-popover-padding, 20px);
  background-color: createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  border-color: createColor(
    --wix-ui-tpa-popover-border-color,
    var(--wst-primary-background-color-rgb, 255, 255, 255), 
    var(--wix-ui-tpa-popover-border-color-opacity, 0.4)
  );
  border-radius: var(--wix-ui-tpa-popover-border-radius, 0px);
  border-width: 1px;
  border-style: solid;
}

.root:wired .popover[data-placement*="right"] .arrow {
  border-right-color: createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)), var(--wix-ui-tpa-popover-border-color-opacity, 1));
}

.root:wired .popover[data-placement*="left"] .arrow {
  border-left-color: createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)), var(--wix-ui-tpa-popover-border-color-opacity, 1));
}

.root:wired .popover[data-placement*="bottom"] .arrow {
  border-bottom-color: createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)), var(--wix-ui-tpa-popover-border-color-opacity, 1));
}

.root:wired .popover[data-placement*="top"] .arrow {
  border-top-color: createColor(--wix-ui-tpa-popover-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)), var(--wix-ui-tpa-popover-border-color-opacity, 1));
}

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