//
// Panels
// --------------------------------------------------

.panel {
  &-heading {
    & + .panel-body,
    & + .panel-collapse.show,
    & + .panel-collapse.collapsing {
      @include themes-border-top(panel-border-inner);
    }
  }

  &-collapse {
    @include border-radius-bottom($panel-border-radius);
  }

  &-bordered {
    > .panel-heading {
      overflow: hidden;
      position: relative;
      padding-top: $panel-padding-y + $panel-bordered-border-height;

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: $panel-bordered-border-height;
        display: block;
        background-color: $brand-primary-light-1;
      }

      &-border {
        border-top: $panel-bordered-border-height solid $brand-primary-light-1;

        &:first-child:before {
          content: none;
        }
      }
    }
  }

  &-carets {
    > .panel-heading {
      &:after {
        content: none;
      }

      &.d-flex .panel-caret {
        margin-top: 0;
        top: auto;
      }
    }

    .panel-caret {
      $icon-height: $grid-unit-y * 2;

      position: absolute;
      margin-top: -(ceil($icon-height * 0.5));
      top: 50%;
      right: $panel-padding-x;

      @include transition-property(transform);
      @include transition-duration($component-animation-duration);
      @include transition-timing-function($component-animation-timing);

      &:hover,
      &:focus {
        &:before {
          color: $brand-primary;
        }
      }

      &:before {
        content: "\f107";
        font-family: $font-family-awesome;
        font-weight: 300;
        font-size: $font-size-h3;
        line-height: $icon-height;
        cursor: pointer;
        vertical-align: middle;

        @include themes(color, color-text-light);
      }
    }

    &.panel-open {
      .panel-caret {
        @include transform(rotate(180deg));
      }
    }
  }
}