@import "../variables";

.cr-collbox {
  @extend .panel;
  @extend .panel-default;
  border-color: $brand-gray-light;

  &__title {
    @extend .panel-title;

    .collapse-toggle.collapsed::before {
      @extend .cr-i--plus;
    }

    .collapse-toggle::before {
      @extend .cr-i;
      @extend .cr-i--minus;
      padding-right: 0.56em;
      display: inline-block;
      font-size: $font-size-large;
      line-height: 20px;
      vertical-align: bottom;
  }
  }

  &__heading {
    padding: 0;
    background-color: $gray-5;

    h3 {
      margin: 0;

      .collapse-toggle {
        color: $brand-primary;
        text-decoration: none;
        padding: 11px 15px 9px;
        display: inline-block;
        line-height: 20px;
        font-size: 1.357rem;
        vertical-align: middle;
        width: 100%;
      }

      .collapse-toggle:focus {
        outline: 5px auto -webkit-focus-ring-color !important;
        outline-offset: -2px;
      }

      @media screen and (min-width: 800px +1) {
        a:hover {
          color: $brand-secondary;
          text-decoration: underline;
        }
      }
    }
  }

  &__body {
    @extend .panel-body;
    font-size: $font-size;

    p:last-child {
      margin-bottom: 0;
    }
  }

  &__collapse {
    @extend .panel-collapse;
  }
}