@value highlightColor, panelBorderColor from '../colors.css';

.common {

}

.common + .common {
  border-top: 1px solid panelBorderColor;
  ;
}

.expanded {
  composes: common;
}

.collapsed {
  composes: common;
}

.common > header > button {
  display: block;
  width: 100%;
  border: none;
  padding: 18px 42px 18px 20px;
  background-color: inherit !important;
  text-align: left;
  color: #424242;
  background-position: calc(100% - 12px) center;
  background-repeat: no-repeat;
  font-weight: 600;
  outline-offset: -6px;
}

.common > header > button:focus {
  outline: 2px solid #424242;
  box-shadow: none;
}

.expanded > header > button {
  background-image: url(../../images/collapse.svg);
}

.expanded > header > button:hover {
  background-image: url(../../images/collapseActive.svg);
}

.collapsed > header > button {
  background-image: url(../../images/expand.svg);
}

.collapsed > header > button:hover {
  background-image: url(../../images/expandActive.svg);
}