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

wix-style-react

@st-import [SP2, SP4] from "../../Foundation/stylable/spacing.st.css";
@st-import [THEME-DIVIDER-COLOR] from "../../Foundation/stylable/colors.st.css";
@st-import [
  --wds-side-panel-control-layout-divider-border-width,
  --wds-color-border-dark-secondary,
  --wds-space-200,
  --wds-space-400,
  --wds-side-panel-field-padding-horizontal,
  --wds-side-panel-field-padding-vertical,
  ] from "@wix/design-system-tokens/all.st.css";

@property --border-width;

.root {
  -st-states:
    padded,
    divider(enum(auto, true, false));
}

.root:padded {
  padding: var(--wds-side-panel-field-padding-vertical, value(SP2)) var(--wds-side-panel-field-padding-horizontal, value(SP4));
}

/*
 * Divider behavior:
 *   - `divider="auto"` - divider set according to token
 *   - `divider=true` - divider should be visible regardless of the theme
 *   - `divider=false` - divider should not be visible regardless of the theme
 *
 * Last child should not have a divider regardless of the divider option or
 * theme.
 */

.root:not(:last-child) {
  border-bottom: var(--border-width) solid var(--wds-color-border-dark-secondary, value(THEME-DIVIDER-COLOR));
}

.root:divider(auto) {
  --border-width: var(--wds-side-panel-control-layout-divider-border-width, 1px);
}

.root:divider(true) {
  --border-width: var(--wds-side-panel-control-layout-divider-border-width, 1px);
}

.root:divider(false) {
  --border-width: 0;
}

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