wix-style-react/dist/src/Popover/Popover.st.css

wix-style-react

@st-import [
  --wds-popover-border,
  --wds-shadow-surface-overlay,
  --wds-color-fill-surface-overlay,
  --wds-color-fill-surface-overlay-dark,
  --wds-color-text-standard-primary,
  --wds-color-text-standard-primary-light,
  --wds-font-size-body-small,
  --wds-font-line-height-body-small,
] from '@wix/design-system-tokens/all.st.css';
@st-import [D10, D80] from "../Foundation/stylable/colors.st.css";
@st-import [shadow30] from "../Foundation/stylable/shadows.st.css";
@st-import [ease-3, ease-4] from "../Foundation/stylable/easing.st.css";
@st-import calc from "./PopoverCore/utils/calc";

:vars {
  contentArrowSize: 8px;
}

.root {
  -st-states: fluid, skin(enum(light, dark));
  position: relative;
  display: inline-block;
}

.root:fluid {
  display: block;
  width: 100%;
}

.content {
  -st-states: placement(enum(top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end)), skin(enum(light, dark)), hasArrow;
  border: none;
  border-radius: var(--wds-popover-border, 8px);
  box-sizing: border-box;
  box-shadow: var(--wds-shadow-surface-overlay, value(shadow30));
  font-size: var(--wds-font-size-body-small, 14px);
  line-height: var(--wds-font-line-height-body-small, 18px);
}

.content:skin(light) {
  color: var(--wds-color-text-standard-primary, value(D10));
  background: var(--wds-color-fill-surface-overlay, white);
}

.content:skin(dark) {
  color: var(--wds-color-text-standard-primary-light, value(D80));
  background: var(--wds-color-fill-surface-overlay-dark, value(D10));
}

.content:hasArrow:placement(right),
.content:hasArrow:placement(right-start),
.content:hasArrow:placement(right-end) {
  margin-left: calc(value(contentArrowSize) - 2px);
}

.content:hasArrow:placement(left),
.content:hasArrow:placement(left-start),
.content:hasArrow:placement(left-end) {
  margin-right: calc(value(contentArrowSize) - 2px);
}

.content:hasArrow:placement(top),
.content:hasArrow:placement(top-start),
.content:hasArrow:placement(top-end) {
  margin-bottom: calc(value(contentArrowSize) - 2px);
}

.content:hasArrow:placement(bottom),
.content:hasArrow:placement(bottom-start),
.content:hasArrow:placement(bottom-end) {
  margin-top: calc(value(contentArrowSize) - 2px);
}

.arrow {
  -st-states: skin(enum(light, dark)), placement(enum(top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end));

  position: absolute;
  width: value(contentArrowSize);
  height: value(contentArrowSize);

  background: transparent;
  box-sizing: border-box;

  transform: rotateZ(45deg);
  border-style: solid;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
  border-width: calc(value(contentArrowSize) / 2);
  margin: 0;
}

.arrow:skin(light) {
  border-color: transparent var(--wds-color-text-standard-primary-light, value(D80)) var(--wds-color-text-standard-primary-light, value(D80)) transparent;
}

.arrow:skin(dark) {
  border-color: transparent var(--wds-color-fill-surface-overlay-dark, value(D10)) var(--wds-color-fill-surface-overlay-dark, value(D10)) transparent;
}

.arrow:placement(right),
.arrow:placement(right-start),
.arrow:placement(right-end) {
  transform: rotateZ(135deg);
  left: calc(value(contentArrowSize) / 2 - 2px);

  margin-top: value(contentArrowSize);
  margin-bottom: value(contentArrowSize);
}

.arrow:placement(left),
.arrow:placement(left-start),
.arrow:placement(left-end) {
  transform: rotateZ(-45deg);
  right: calc(value(contentArrowSize) / 2 - 2px);

  margin-top: value(contentArrowSize);
  margin-bottom: value(contentArrowSize);
}

.arrow:placement(top),
.arrow:placement(top-start),
.arrow:placement(top-end) {
  transform: rotateZ(45deg);
  bottom: calc(value(contentArrowSize) / 2 - 2px);

  margin-left: value(contentArrowSize);
  margin-right: value(contentArrowSize);
}

.arrow:placement(bottom),
.arrow:placement(bottom-start),
.arrow:placement(bottom-end) {
  transform: rotateZ(-135deg);
  top: calc(value(contentArrowSize) / 2 - 2px);

  margin-left: value(contentArrowSize);
  margin-right: value(contentArrowSize);
}

.element {}

.animationEnter {
  opacity: 0;
  transform: scale(0.9);
}

.animationEnterActive {
  opacity: 1;
  transform: scale(1);
  transition: opacity 150ms value(ease-3), transform 150ms value(ease-3);
}

.animationExit {
  opacity: 1;
  transform: scale(1);
}

.animationExitActive {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 100ms value(ease-4), transform 100ms value(ease-4);
}

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