wix-style-react/dist/src/SidePanel/Header/Header.st.css

wix-style-react

@st-import [
  --wds-side-panel-header-padding-left,
  --wds-side-panel-header-padding-right,
  --wds-side-panel-header-padding-vertical,
  --wds-side-panel-floating-header-padding-left,
  --wds-side-panel-floating-header-padding-right,
  --wds-side-panel-floating-header-padding-vertical,
  --wds-space-0,
  --wds-space-50,
  --wds-space-100,
  ] from '@wix/design-system-tokens/all.st.css';

@st-namespace "SidePanelHeader";

.root {
  -st-states: newColorsBranding, skin(enum(standard, floating)), isDraggable;
  flex: 0 1 auto;
}

.titleContainer {
  -st-states: noCloseButton;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wds-space-100, 0px);
  min-height: 30px;
  padding-block: var(--wds-side-panel-header-padding-vertical, 24px);
  padding-right: var(--wds-side-panel-header-padding-right, 12px);
  padding-left: var(--wds-side-panel-header-padding-left, 24px);
}

.titleContainer:noCloseButton {
  padding-block: var(--wds-side-panel-header-padding-vertical, 24px);
  padding-right: var(--wds-side-panel-header-padding-right, 24px);
  padding-left: var(--wds-side-panel-header-padding-left, 24px);
}

.root:newColorsBranding .titleContainer {
  padding-block: var(--wds-side-panel-header-padding-vertical, 18px);
  padding-right: var(--wds-side-panel-header-padding-right, 12px);
  padding-left: var(--wds-side-panel-header-padding-left, 24px);
}

.root:newColorsBranding .titleContainer:noCloseButton {
  padding-block: var(--wds-side-panel-header-padding-vertical, 18px);
  padding-right: var(--wds-side-panel-header-padding-right, 24px);
  padding-left: var(--wds-side-panel-header-padding-left, 24px);
}

.titleContainer .title {
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.helpIcon {
  width: 24px;
  height: 24px;
}

.closeButton {
  align-self: flex-start;
  margin-left: var(--wds-space-0, 12px);
}

.buttonBox {
  display: flex;
  margin-top: calc(-1 * var(--wds-space-50));
  gap: var(--wds-space-50, 0px);
  align-self: flex-start;
}

/* skin: floating */

.root:skin(floating) .titleContainer,
.root:skin(floating) .titleContainer:noCloseButton {
  padding-block: var(--wds-side-panel-floating-header-padding-vertical, 12px);
  padding-left: var(--wds-side-panel-floating-header-padding-left, 24px);
  padding-right: var(--wds-side-panel-floating-header-padding-right, 9px);
}

.root:skin(floating):isDraggable:hover .titleContainer {
  cursor: grab;
}

.root:skin(floating):isDraggable:active .titleContainer {
  cursor: grabbing;
}

.root:skin(floating):isDraggable .buttonBox {
  cursor: auto;
}

/* st-namespace-reference="../../../../src/SidePanel/Header/Header.st.css" */