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

.panel {
  font-size: $font-size-base;
  line-height: $grid-unit-y * 3;
  margin-bottom: $line-height-computed;
  padding: $panel-padding-y $panel-padding-x;

  @include themes(background-color, panel-bg);
  @include border-radius($panel-border-radius);

  @include box-shadow-themes(box-shadow-new);

  // Elements
  // ----------------------

  &-heading {
    & > .dropdown .dropdown-toggle {
      color: inherit;
    }
  }

  &-title,
  &-subtitle {
    font-weight: $font-weight-medium;
    line-height: $panel-title-line-height;
    margin-top: 0;
    margin-bottom: 0;

    @include text-responsive($font-size-h3);

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

    > a,
    > small,
    > .small,
    > small > a,
    > .small > a {
      color: inherit;
    }
  }

  &-body {
    padding-top: $panel-padding-y;

    @include clearfix;

    &-bt {
      @include themes-border-top(panel-border-inner);
    }

    & + .panel-body {
      border-top-width: 1px;
      border-top-style: solid;
      margin-top: $panel-padding-y;

      @include themes(border-color, panel-border-inner);
    }
  }

  &-collapse {
    padding-top: $panel-padding-y;
  }

  & > a.panel-body {
    display: block;

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  &-tabs {
    .nav {
      padding: 0 $layout-margin;
    }
  }

  &-scroll {
    position: relative;
    max-height: $modal-md;
    overflow-y: auto;
    margin-left: -$panel-padding-x;
    margin-right: -$panel-padding-x;
    padding-left: $panel-padding-x;
    padding-right: $panel-padding-x;

    @include styled-scroll-vert();

    &-sm {
      max-height: $modal-sm;
    }
  }

  // Panel with grid
  > .row {
    padding-top: $panel-padding-y;

    > .col,
    > [class*="col-"] {
      &:not(:last-child) {
        padding-right: 0;
      }

      &:not(:first-child) {
        padding-left: 0;

        @include themes-border-left(panel-border-inner);
      }

      &:first-child {
        .panel {
          padding-left: 0;
        }
      }

      &:last-child {
        .panel {
          padding-right: 0;
        }
      }

      .panel {
        margin-bottom: 0;
      }
    }
  }

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

  &-bordered {
    $padding: $grid-unit-y;

    border-radius: $panel-border-radius;
    padding-top: 0;

    > div:first-child,
    .panel-bordered-item {
      overflow: hidden;
      display: block;
      position: relative;
      margin-left: -$panel-padding-x;
      margin-right: -$panel-padding-x;
      padding-top: $panel-padding-y + $panel-bordered-border-height;
      padding-left: $panel-padding-x;
      padding-right: $panel-padding-x;

      @include border-top-radius($panel-border-radius);

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

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

    @each $theme, $map in $themes {
      .#{$theme} & {
        $panel-border: map-get($map, panel-border-inner);

        @include panel-bordered-variant($brand-primary, $panel-border);
      }
    }

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

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

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

    // Color Variations

    &-warning {
      @include panel-bordered-variant-warning();
    }

    &-success {
      @include panel-bordered-variant-success();
    }

    &-info {
      @include panel-bordered-variant-info();
    }

    &-danger {
      @include panel-bordered-variant-danger();
    }

    &-muted {
      @include panel-bordered-variant-muted();
    }

    //# Harmony

    @each $name, $color in $map-harmony-colors {
      &-#{$name} {
        @each $theme, $map in $themes {
          .#{$theme} & {
            $panel-border: map-get($map, panel-border-inner);

            @include panel-bordered-variant($color, $panel-border);
          }
        }
      }
    }

    // Drag and Drop

    &.dndDragging {
      border-radius: $border-radius-base;
    }
  }

  &-with-border {
    @include themes-border(color-new-border);
  }

  &-carets {
    > .panel-heading {
      position: relative;
      padding-right: $panel-group-collapse-icon-size + $padding-base-horizontal +
        $panel-padding-x;

      &:after {
        $icon-height: $grid-unit-y * 2;

        content: "\f107";
        font-family: $font-family-awesome;
        font-weight: 300;
        position: absolute;
        top: $grid-unit-y * 2;
        right: 0;
        font-size: $font-size-h4;
        line-height: $icon-height;
        margin-top: -(ceil($icon-height * 0.5));

        @include themes(color, color-new-body-light);
        @include transition-property(transform);
        @include transition-duration($component-animation-duration);
        @include transition-timing-function($component-animation-timing);
      }
    }

    &.panel-open {
      overflow: hidden;

      > .panel-heading {
        &:after {
          @include transform(rotate(180deg));
        }
      }
    }

    &.panel-bordered {
      .panel-heading {
        padding-right: $panel-group-collapse-icon-size +
          $padding-base-horizontal;

        &:after {
          right: $panel-padding-x;
          top: $grid-unit-y * 5 + 2;
        }
      }
    }

    &-with-link {
      $icon-height: $grid-unit-y * 3;

      &.panel-open {
        overflow: hidden;

        .panel-heading {
          &:after {
            @include transform(rotate(180deg));
          }
        }
      }

      .panel-heading {
        position: relative;
        padding-right: $panel-group-collapse-icon-size +
          $padding-base-horizontal;

        @include border-radius-bottom($panel-border-radius);

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

      .panel-caret {
        position: absolute;
        margin-top: -(ceil($icon-height * 0.5));
        top: $panel-padding-x + $panel-bordered-border-height + $grid-unit-y * 2;
        right: 0;

        @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-h4;
          line-height: $icon-height;
          cursor: pointer;
          vertical-align: middle;

          @include themes(color, color-new-body-light);
        }
      }

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

        .panel-body {
          @include border-radius-bottom($panel-border-radius);
        }
      }

      &.panel-bordered {
        .panel-heading {
          padding-right: $panel-group-collapse-icon-size +
            $padding-base-horizontal;
        }

        .panel-caret {
          margin-top: -(ceil($icon-height * 0.5)) - (ceil($panel-bordered-border-height *
                  0.5));
          right: $panel-padding-x;
        }
      }
    }
  }

  // Responsive
  // ----------------------

  &-responsive {
    @include media-breakpoint-down(md) {
      padding: $layout-fixed-padding-mobile;

      &.panel-carets {
        .panel-heading {
          padding-right: $panel-group-collapse-icon-size +
            $padding-xs-horizontal + $layout-fixed-padding-mobile;

          &:after {
            right: $layout-fixed-padding-mobile;
          }
        }
      }

      .panel-table {
        .table-responsive {
          border-width: 0;

          .table {
            > thead,
            > tbody,
            > tfoot {
              > tr {
                > th,
                > td {
                  &:first-child {
                    padding-left: $layout-fixed-padding-mobile;
                  }

                  &:last-child {
                    padding-right: $layout-fixed-padding-mobile;
                  }
                }
              }
            }
          }
        }
      }
    }

    @include media-breakpoint-down(sm) {
      margin-left: -($layout-fixed-padding-mobile + 1);
      margin-right: -($layout-fixed-padding-mobile + 1);

      @include border-radius(0);
    }
  }

  // Size Variations
  // ----------------------

  &-lg {
    @include panel-size($panel-padding-lg);
  }

  &-sm {
    @include panel-size($panel-padding-sm);
  }

  &-xs {
    @include panel-size($panel-padding-xs);
  }

  // List Groups
  // ----------------------

  > .list-group,
  > .panel-collapse > .list-group {
    margin-bottom: 0;
    margin-top: $panel-padding-y;

    @include themes-border-top(panel-border-inner);

    &:not(:first-child) {
      border-top-width: 0;
    }

    &:first-child {
      border-top-width: 0;

      .list-group-item:first-child {
        border-top-width: 0;
      }
    }

    &:last-child {
      .list-group-item:last-child {
        border-bottom: 0;
      }
    }

    .list-group-item {
      border-width: 1px 0;
      border-radius: 0;
      padding: $padding-small-horizontal 0;

      @include themes(border-color, panel-border-inner);
    }

    &-scroll {
      max-height: calc(
        100vh - #{$panel-padding-y * 2 + $panel-title-line-height +
          $layout-fixed-padding * 2 + 2}
      );
      overflow-y: auto;

      @include themes(border-color, panel-border-inner);
      @include styled-scroll-vert($background-color: $color-grey-rgba-04);

      &-extended {
        max-height: 100vh;
      }

      &-sm {
        max-height: $grid-unit-y * 50;
      }
    }
  }

  > .panel-heading + .panel-collapse > .list-group {
    .list-group-item:first-child {
      @include border-top-radius(0);
    }
  }

  &:not(.panel-bordered) {
    .panel-heading + .list-group {
      .list-group-item:first-child {
        border-top-width: 1px;
      }
    }
  }

  // Tables in panels
  // ----------------------

  .panel-table {
    @include themes(background-color, panel-bg);

    > .table,
    > .table-responsive > .table,
    > dynamic-draw-table > .table-responsive > .table {
      margin-bottom: 0;

      > thead,
      > tbody,
      > tfoot {
        &:last-child {
          tr:last-child {
            td,
            th {
              border-bottom-width: 0;
            }
          }
        }

        > tr {
          td:first-child,
          th:first-child {
            padding-left: $panel-padding-x;
          }

          > td,
          > th {
            @include themes(border-color, panel-border);
          }
        }
      }
    }

    .table {
      > tbody {
        > tr:last-child {
          > td {
            border-bottom-width: 0;
          }
        }
      }
    }

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

      > .table:first-child,
      > .table-responsive > .table:first-child {
        > thead:first-child,
        > tbody:first-child {
          > tr:first-child {
            border-top-left-radius: ($panel-border-radius - 1);
            border-top-right-radius: ($panel-border-radius - 1);

            td:first-child,
            th:first-child {
              border-top-left-radius: ($panel-border-radius - 1);
            }

            td:last-child,
            th:last-child {
              border-top-right-radius: ($panel-border-radius - 1);
            }
          }
        }
      }
    }

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

      > .table:last-child,
      > .table-responsive:last-child > .table:last-child {
        > tbody:last-child,
        > tfoot:last-child {
          > tr:last-child {
            border-bottom-right-radius: ($panel-border-radius - 1);
            border-bottom-left-radius: ($panel-border-radius - 1);

            td:first-child,
            th:first-child {
              border-bottom-left-radius: ($panel-border-radius - 1);
            }
            td:last-child,
            th:last-child {
              border-bottom-right-radius: ($panel-border-radius - 1);
            }
          }
        }
      }
    }
  }

  &-heading + .panel-table,
  &-heading + loader > div > .panel-table,
  &-body + .panel-table {
    margin-top: $panel-padding-y;

    @include themes-border-top(panel-border-inner);

    .table-responsive {
      border-top-width: 0;
    }
  }
}