wix-style-react/src/Accordion/AccordionItem/AccordionItem.st.css

wix-style-react

:import {
  -st-from: '../../Foundation/stylable/colors.st.css';
  -st-named: 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, reducedSpacingAndImprovedLayout,
    skin(enum(standard, light, neutral)), size(enum(tiny, small, medium, large)), horizontalPadding(enum(tiny, small, medium, large));
}

.header {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 value(SP5);
  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: value(SP2);
  padding-bottom: value(SP2);
}

.root:reducedSpacingAndImprovedLayout: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);
}

.icon {
  margin-right: value(SP2);
  height: 24px;
}

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

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

.root:reducedSpacingAndImprovedLayout .header {
  padding-inline-start: value(SP4);
  padding-inline-end: value(SP4);
}

.root:reducedSpacingAndImprovedLayout .children {
  padding: value(SP3) value(SP4);
}

.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);
}

.toggleButton {
  flex: 0 0 auto;
  margin-left: auto;
}