// See COPYRIGHT.md for copyright information

.accordian .card {
  margin-top: 0.4rem;
  background-color: var(--colour-button-bg);

  .card-body {
    display: none;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    padding-bottom: 0.8rem;

    & > h4:first-child {
      margin-top: 0.8rem;
    }
  }

  .title {
    .text-md();

    padding: 1.2rem 1.6rem;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;

    &:hover {
      background-color: var(--colour-bg-selected);
    }
  }

  &.active {
    background-color: var(--colour-bg-selected);

    .title {
      font-weight: bold;
    }

    .card-body {
      display: block;
    }
  }
}