//
// Panel Group
// --------------------------------------------------

.panel-group {
  border-radius: $panel-border-radius;
  margin-bottom: $padding-large-vertical;

  &,
  & > div {
    .panel {
      margin-bottom: 0;
      padding: 0;

      @include border-radius(0);
      @include box-shadow(none);

      &.panel-open,
      &.collapsed {
        .panel-title a {
          &:before {
            @include transform(rotate(90deg));
          }
        }
      }

      &:first-child {
        @include border-radius-top($panel-border-radius);

        > .list-group {
          @include border-radius-top($panel-border-radius);
        }
      }

      &:last-child {
        @include border-radius-bottom($panel-border-radius);
      }

      &:not(:last-child) {
        > .list-group {
          border-bottom-width: 0;

          @include border-radius-bottom(0);

          .list-group-item {
            padding-left: $panel-padding-x;
            padding-right: $panel-padding-x;

            &:last-child {
              @include border-radius-bottom(0);
            }
          }
        }
      }

      + .panel {
        @include themes-border-top(panel-border-inner);
      }

      > .panel-heading {
        font-size: $font-size-large;
        font-weight: $font-weight-regular;
        font-family: $font-family-proxima;
        line-height: $list-group-item-line-height;
        padding: $list-group-item-padding-y $panel-padding-x;
        cursor: pointer;
        border-bottom: 0;
        position: relative;

        @include themes(color, color-new-heading);
      }

      .panel-title {
        font-size: $font-size-large;
        line-height: $list-group-item-line-height;
        font-weight: $font-weight-regular;
        font-family: $font-family-proxima;

        a {
          @include text-overflow();

          &:before {
            $icon-height: $font-size-extra-small;

            content: "\f054";
            font-family: $font-family-awesome;
            font-weight: 300;
            position: absolute;
            top: 50%;
            right: $grid-unit-x * 4;
            font-size: $font-size-extra-small;
            line-height: $icon-height;
            margin-top: -(ceil($icon-height * 0.5));
            opacity: 0.5;

            @include themes(color, color-new-heading);

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

        &-icon {
          padding-right: $padding-small-horizontal;

          .fa {
            vertical-align: top;
          }
        }
      }

      > .panel-collapse > .panel-body {
        padding: $list-group-item-padding-x $panel-padding-x;

        &:first-child {
          padding-top: 0;
        }
      }
    }
  }

  // Style Variations
  // ------------------

  &-transparent {
    $padding-x: $grid-unit-x * 3;

    &,
    & > div {
      .panel {
        background-color: transparent;

        > .list-group {
        }

        + .panel {
          @include themes-value(border-top-width, 0);
        }

        &.panel-open {
          > .panel-heading {
            .panel-title {
              a {
                &:before {
                  @include transform(rotate(90deg));
                }
              }
            }
          }
        }

        // Panel Heading in collapsible panel
        > .panel-heading {
          background-color: transparent;
          display: block;
          padding: $padding-small-vertical $padding-x;

          .panel-title {
            a {
              font-size: $font-size-large;
              font-weight: $font-weight-regular;
              line-height: $grid-unit-y * 5;
              padding: $padding-small-vertical
                ($padding-x + $padding-small-vertical) $padding-small-vertical
                $padding-x;
              display: block;
              text-transform: capitalize;
              margin-left: -$padding-x;
              margin-right: -$padding-x;
              margin-top: -$padding-small-vertical;
              margin-bottom: -$padding-small-vertical;
              font-family: $font-family-base;

              @include themes(color, panel-group-transparent-panel-title-color);

              &:before {
                right: $padding-x;
              }

              &:hover {
                text-decoration: none;

                @include themes(
                  background-color,
                  panel-group-transparent-panel-title-hover-bg
                );
              }

              &:focus {
                text-decoration: none;

                @include themes(
                  background-color,
                  panel-group-transparent-panel-title-focus-bg
                );
              }
            }
          }
        }

        // Panel Heading in noncollapsible panel
        > div.panel-heading {
          cursor: default;

          > .panel-title-caption {
            display: block;
            line-height: $list-group-item-line-height;

            @include text-responsive($font-size-h3);
            @include themes(color, color-new-body-light);
          }
        }

        > .panel-collapse {
          padding-top: 0;

          > .panel-body {
            border-width: 0;

            .list-group {
              margin-top: 0;
              margin-left: -$panel-padding-x;
              margin-right: -$panel-padding-x;
              margin-bottom: -$panel-padding-x;

              @include list-group-transparent();

              @include list-group-lite();

              .list-group-item,
              a.list-group-item {
                padding-left: $list-group-item-padding-x * 1.5;
                border-radius: 0;
              }
            }
          }
        }

        > .panel-body {
          background-color: transparent;
          border-width: 0;
          padding: $padding-small-vertical $padding-large-horizontal;
        }

        > .list-group {
          margin-top: 0;

          @include list-group-transparent();
          @include list-group-lite();

          .list-group-item {
            border-radius: 0 !important;
            padding-left: $panel-padding-x;
            padding-right: $panel-padding-x;

            &:first-child {
              border-top-width: 0 !important;
            }
          }
        }
      }
    }
  }

  &-stocktake {
    & > .panel {
      border-radius: $border-radius-large;

      &:not(:last-child) {
        margin-bottom: $grid-unit-y;
        border-bottom-width: 1px;

        & > .panel-collapse > .panel-body {
          @include border-radius-bottom($border-radius-large);
        }
      }

      &:last-child {
        > .panel-heading {
          border-radius: $border-radius-large;
        }
      }

      & + .panel {
        @include themes(border-top-width, panel-border-width);
      }

      &:not(.panel-open) > .panel-heading {
        border-radius: $border-radius-large;
      }

      &.panel-open > .panel-heading {
        @include border-radius-bottom(0);
      }

      > .panel-heading {
        border-top-width: 0;
        border-right-width: 0;
        border-left-width: 0;
        padding-top: $grid-unit-y * 3;
        padding-bottom: $grid-unit-y * 3;
        border-bottom-width: 0;

        > .panel-title {
          font-weight: $font-weight-regular;
          font-family: $font-family-proxima;

          > a {
            outline: 0;
          }
        }
      }

      > .panel-collapse > .panel-body {
        padding-top: $grid-unit-y * 3;
        padding-bottom: $grid-unit-y * 3;
        border-width: 0;
      }
    }

    &.panel-group-carets {
      > .panel {
        .panel-heading {
          position: relative;
        }

        .panel-title {
          &:before {
            right: 0;
          }
        }
      }
    }
  }
}