@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/layout";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/animation";

$heading-active-color: $kz-color-wisteria-100;

.container {
  border: 1px solid $ca-border-color;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: $ca-border-radius;
}

.separated {
  & + .separated {
    @include ca-margin($top: $ca-grid * 0.3);
  }
}

.groupItem {
  & + .groupItem {
    border-top: 1px solid $ca-border-color;
  }
}

.button {
  display: flex;
  width: 100%;
  align-items: center;
  text-align: left;
  background-color: white;
  border: none;
  transition: background-color $ca-duration-rapid;

  @include ca-padding(
    $top: $ca-grid,
    $end: $ca-grid,
    $bottom: $ca-grid,
    $start: $ca-grid
  );

  &:hover {
    background-color: $heading-active-color;
  }
}

.title {
  flex: 1 1 auto;
}

.open {
  background-color: $heading-active-color;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 10;
}

.section {
  background-color: white;
  @include ca-padding(
    $top: $ca-grid,
    $end: $ca-grid,
    $bottom: $ca-grid,
    $start: $ca-grid
  );
}

.noPadding {
  padding: 0;
}

.hide {
  display: none;
}