.vuiAccordionHeader {
  font-size: $fontSizeSmall;
  font-weight: $fontWeightBold;
  padding: $sizeXs $sizeS;
  // Work inside panels or other containers with different background colors.
  background-color: transparent;
  border: 1px solid var(--vui-color-border-light);
  width: 100%;
  border-radius: $sizeXxs;

  &:hover {
    color: var(--vui-color-primary-shade);
    background-color: var(--vui-color-primary-lighter-shade);
    border-color: rgba(var(--vui-color-primary-shade-rgb), 0.5);
    text-decoration: underline;
  }
}

.vuiAccordionHeader--isOpen {
  color: var(--vui-color-text);
  font-weight: $fontWeightBold;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.vuiAccordionHeader__title {
  text-align: left;
}

.vuiAccordionBody {
  border: 1px solid var(--vui-color-border-light);
  border-top: none;
  padding: $sizeM $sizeL;
  border-bottom-right-radius: $sizeXxs;
  border-bottom-left-radius: $sizeXxs;
}

.vuiAccordionHeader--paddingNone {
  padding: 0;
}

.vuiAccordionHeader--noFrame {
  border: none;
}

.vuiAccordionBody--paddingNone {
  padding: 0;
}

.vuiAccordionBody--noFrame {
  border: none;
}

.vuiAccordionHeader__wrapper {
  border: 1px solid var(--vui-color-border-light);
  border-radius: $sizeXxs;
}

.vuiAccordionHeader__wrapper--isOpen {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.vuiAccordionHeader__wrapper--noFrame {
  border: none;
}