@use 'colours';
@use 'typography';
@use 'fontawesome';

section.readmore {
  > input[type='checkbox'] {
    display: none;
  }

  > label {
    @extend a;
    cursor: pointer;
    text-decoration: none;

    &::before {
      content: 'Read more...';
    }
  }

  > div + div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out;
  }

  > input[type='checkbox']:checked + div + div {
    max-height: 1000px;
  }

  > input[type='checkbox']:checked + div + div + label::before {
    content: 'Read less...';
  }
}

section.expansion {
  border-bottom: 1px solid colours.$colour-divider;
  .expansion-checkbox {
    display: none;
  }

  .expansion-label {
    @extend h3;
    display: block;
    cursor: pointer;
    margin-bottom: unset;
    padding: 12px 0 12px;
    display: flex;
    &::after {
      @extend .fa;
      @extend .fa-chevron-down, :before;
      float: right;
      display: flex !important;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-left: 12px;
    }
    h3 {
      flex-grow: 1;
    }
  }

  .expansion-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.25s ease-in-out;
  }

  .expansion-checkbox:checked {
    ~ .expansion-label::after {
      @extend .fa-chevron-up, :before;
    }
  }

  .expansion-checkbox:checked {
    ~ .expansion-content {
      max-height: 1000px;
      padding-bottom: 12px;
    }
  }
}