wix-style-react/dist/es/src/Accordion/components/AccordionItem/AccordionItem.st.css

wix-style-react

:import {
  -st-from: '../../../Foundation/stylable/colors.st.css';
  -st-named: B50, B60, B10, D10, D60, D70, D80;
}

:import {
  -st-from: "../../../Foundation/stylable/shadows.st.css";
  -st-named: shadow30InnerTop, shadow30InnerBottom;
}

:import {
  -st-from: "../../../Foundation/stylable/spacing.st.css";
  -st-named: SP2, SP3, SP4, SP5;
}

.root {
  -st-states: hover, disabled, open, hideShadow, last,
    skin(enum(standard, light, neutral)), size(enum(tiny, small, medium, large)), horizontalPadding(enum(none, tiny, small, medium, large)),
    newColorsBranding;
}

@st-import [--wds-space-100, --wds-space-200] from "@wix/design-system-tokens/all.st.css";

.header {
  box-sizing: border-box;
  position: relative;
  display: flex;
  gap: var(--wds-space-200, 12px);
  align-items: center;
  padding: 0 value(SP4);
  transition: background-color .3s;
  outline: none;
}

.root:skin(neutral) .header {
  background-color: value(D70);
}

.root:open:skin(neutral) .header {
  box-shadow: inset 0px -1px 0px value(D60);
}

.root:size(tiny) .header {
  padding-top: value(SP2);
  padding-bottom: value(SP2);
}

.root:size(small) .header {
  padding-top: 15px;
  padding-bottom: 15px;
}

.root:size(medium) .header {
  padding-top: value(SP3);
  padding-bottom: value(SP3);
}

.root:size(large) .header {
  padding-top: value(SP4);
  padding-bottom: value(SP4);
}

.root:not(:disabled):hover .header {
  background-color: value(B60);
  cursor: pointer;
}

.root:skin(neutral):not(:disabled):hover .header {
  background-color: value(D60);
}

.root:newColorsBranding:skin(standard):not(:disabled):hover .header,
.root:newColorsBranding:skin(neutral):not(:disabled):hover .header {
  background-color: value(B50);
}

.iconsContainer {
  display: flex;
  gap: var(--wds-space-100, 6px);
}

.affix {
  height: 24px;
}

.titleWrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.children {
  padding: value(SP3) value(SP4);
  background-color: value(B60);
}

.root:horizontalPadding(none) .header,
.root:horizontalPadding(none) .children {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.root:horizontalPadding(tiny) .header,
.root:horizontalPadding(tiny) .children {
  padding-inline-start: value(SP2);
  padding-inline-end: value(SP2);
}

.root:horizontalPadding(small) .header,
.root:horizontalPadding(small) .children {
  padding-inline-start: 15px;
  padding-inline-end: 15px;
}

.root:horizontalPadding(medium) .header,
.root:horizontalPadding(medium) .children {
  padding-inline-start: value(SP3);
  padding-inline-end: value(SP3);
}

.root:horizontalPadding(large) .header,
.root:horizontalPadding(large) .children{
  padding-inline-start: value(SP4);
  padding-inline-end: value(SP4);
}

.root:open .children {
  box-shadow: value(shadow30InnerTop), value(shadow30InnerBottom);
}

.root:last .children {
  box-shadow: value(shadow30InnerTop);
}

.root:open:hideShadow .children {
  box-shadow: none;
}

.root:open:skin(light):hideShadow .children {
  background-color: initial;
}

.root:skin(standard) .children{
  background-color: value(B60);
}

.root:skin(light) .children,
.root:skin(neutral) .children {
  background-color: value(D80);
}

.root:skin(light):hideShadow .children{
  padding-top: 0;
}

.root:open:skin(light):hideShadow .header:hover {
  background-color: value(D80);
}

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