@import "_conditionals";
@import "_colours";
@import "_css3";
@import "_typography";

@include fake-full-width('.checkbox-tree');

fieldset.checkbox-tree__inputs > legend {
  @extend %visually-hidden;
}

.checkbox-tree__counter {
  margin-top: -13px;

  .js-stick-at-top-when-scrolling {

    /* give the floating element some top-padding */
    padding-top: 14px;

    p {
      @extend %question-meta-spacing;
    }
  }

  strong {
    @include bold-24;

    /* overriding the line heights in the bold style is finicky */
    line-height: 0 !important;
  }
}

.checkbox-tree__inputs {

  fieldset.related-information {
    margin-top: $gutter-one-third;
    margin-bottom: 0;
    padding-left: $gutter-half;
    padding-top: 0;

    .validation-wrapper & {
      border-left: solid $border-width $grey-2;
    }

    .last-of-type {
      padding-bottom: 0;
      margin-bottom: 10px;

       @include media(tablet) {
         margin-bottom: 5px;
       }
    }

  }

  details[open] + details {
    margin-top: $gutter-two-thirds;

    @include media(tablet) {
      margin-top: $gutter;
    }
  }

  details {
    position: relative;
    display: block;
    clear: both;
    margin-top: $gutter-one-third;

    summary {
      display: inline-block;
      color: $link-colour;
      cursor: pointer;

      &:hover {
        color: $link-hover-colour;
      }

      &:focus {
        outline: solid 3px $focus-colour;
      }
    }

    legend {
      @extend %visually-hidden;
    }

    .categories-heading {
      @include core-19();

      display: inline-block;
    }

    .categories-summary {
      @include core-19($tabular-numbers: true);

      display: block;
      margin-left: 25px;
      color: $secondary-text-colour;
    }
  }
}