// Name:            Panel
//
// Component:       `panel`
//
// Modifiers:       `panel-heading`
//                  `panel-body`
//                  `panel-footer`
//                  `panel-title`
//                  `panel-dec`
//                  `panel-actions`
//                  `panel-toolbar`
//                  `panel-bordered`
//                  `panel-footer-chart`
//                  `panel-control`
//                  `panel-dark`
//
// ========================================================================

// Variables
// ========================================================================
$panel-border-width                      : 0 !default;

$panel-desc-color                        : $gray-dark !default;
$panel-toolbar-color                     : $gray !default;
$panel-toolbar-color-hover               : $gray-dark !default;
$panel-toolbar-bg                        : transparent !default;
$panel-toolbar-border                    : $panel-inner-border !default;

$panel-dark-text                         : $color-white !default;
$panel-dark-border                       : $brand-dark !default;
$panel-dark-heading-bg                   : $brand-dark !default;

$panel-action-color                      : $gray !default;
$panel-action-active-color               : $gray-darker !default;
$panel-action-hover-color                : $gray-darker !default;

$panel-colored-title-color               : $inverse !default;
$panel-colored-action-color              : $inverse !default;

// Component: Panel
// ========================================================================

.panel {
  background-color: $panel-bg;
  border: $panel-border-width solid transparent;
}

// Panel Heading
// ========================================================================

.panel-heading {
  &-tab {
    background-color: $brand-primary;
    > .nav-tabs {
      .nav-link {
        color: #fff;
        
        &.hover,
        &:hover {
          color: $text-color;
        }
        &.active,
        &:active {
          color: $text-color;
          background-color: $color-white;
        }
      }
    }
  }
}

// Panel Body
// ========================================================================

.panel-body {
  > .list-group-dividered:only-child {
    > .list-group-item:last-child {
      border-bottom-color: transparent;
    }
  }
}

// Panel Footer
// ========================================================================

.panel-footer {
 
  border-top: 1px solid transparent;
  background-color: $panel-footer-bg;

  .table + & {
    border-color: $panel-inner-border;
  }
}

// Panel Title
// ========================================================================

.panel-title {
  color: $headings-color;

  small,
  .small {
    color: $panel-desc-color;
  }
}

// Panel Desc
// ========================================================================

.panel-desc {
  color: $panel-desc-color;
}

// Panel Actions
// ========================================================================

.panel-actions {
  a {
    color: inherit;
  }

  .panel-action {
    color: $panel-action-color;
    background-color: transparent;

    &:hover {
      color: $panel-action-hover-color;
    }

    &:active {
      color: $panel-action-active-color;
    }
  }
}

// Panel Toolbar
// ========================================================================
.panel-toolbar {
  background-color: $panel-toolbar-bg;
  border-bottom: 1px solid $panel-toolbar-border;
  border-top: 1px solid $panel-toolbar-border;

  .panel-bordered & {
    border-top-color: transparent;
  }

  .btn {
    color: $panel-toolbar-color;
    &:hover, &:active, &.active {
      color: $panel-toolbar-color-hover;
    }
  }
}

// Modifier: `panel-control`
// ========================================================================

.panel-control {
  border: none;
}

// Modifier: `panel-bordered`
// ========================================================================

.panel-bordered {
  > .panel-heading {
    border-bottom: 1px solid $panel-inner-border;
  }

  > .panel-footer {
    border-top: 1px solid $panel-inner-border;
  }

  > .table > tbody:first-child > tr:first-child th,
  > .table > tbody:first-child > tr:first-child td {
    border-top: 0;
  }
}

// In Panels
// ========================================================================

.panel {
  // Nav-tabs-vertical in Panel
  // ==========================
  & > .nav-tabs-vertical {
    .nav-tabs {
      > li {
        > a {
          border-left: none;
        }
      }

      &.nav-tabs-reverse {
        > li {
          > a {
            border-right: none;
          }
        }
      }
    }
  }
  
  > .panel-body + .table,
  > .panel-body + .table-responsive,
  > .table + .panel-body,
  > .table-responsive + .panel-body {
    border-top: 1px solid $table-border-color;
  }
  > .table > tbody:first-child > tr:first-child th,
  > .table > tbody:first-child > tr:first-child td {
    border-top: 0;
  }
  > .table-bordered,
  > .table-responsive > .table-bordered {
    border: 0;
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th:first-child,
        > td:first-child {
          border-left: 0;
        }
        > th:last-child,
        > td:last-child {
          border-right: 0;
        }
      }
    }
    > thead,
    > tbody {
      > tr:first-child {
        > td,
        > th {
          border-bottom: 0;
        }
      }
    }
    > tbody,
    > tfoot {
      > tr:last-child {
        > td,
        > th {
          border-bottom: 0;
        }
      }
    }
  }
  > .table-responsive {
    border: 0;
  }

  > .table > tbody:first-child > tr:first-child th,
  > .table > tbody:first-child > tr:first-child td {
    border-top: 1px solid $panel-inner-border;
  }
  
  // List-group in Panel 
  // ===================
  > .list-group,
  > .panel-collapse > .list-group {
    // Add border top radius for first one
    &:first-child {
      .list-group-item:first-child {
        border-top: 0;
      }
    }

    // Add border bottom radius for last one
    &:last-child {
      .list-group-item:last-child {
        border-bottom: 0;
      }
    }
  }
}

// Panel-group
// ========================================================================
.panel-group {

  .panel-heading {
    border-bottom: 0;

    + .panel-collapse > .panel-body,
    + .panel-collapse > .list-group {
      border-top: 1px solid $panel-inner-border;
    }
  }

  .panel-footer {
    border-top: 0;
    + .panel-collapse .panel-body {
      border-bottom: 1px solid $panel-inner-border;
    }
  }
}

// Color Modifier
// ========================================================================

// Modifier: `panel-transparent`
// ----------------------------
.panel.panel-transparent {
  background: transparent;
  border-color: transparent;

  > .panel-heading, > .panel-footer {
    border-color: transparent;
  }
}


// Modifier: `Contextual variations`
// --------------------------------

@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
  border-color: $border;

  & > .panel-heading {
    color: $heading-text-color;
    background-color: $heading-bg-color;
    border-color: $heading-border;

    + .panel-collapse > .panel-body {
      border-top-color: $border;
    }
    .tag-pill {
      color: $heading-bg-color;
      background-color: $heading-text-color;
    }
  }

  .panel-title {
    color: $heading-text-color;
  }

  .panel-action {
    color: $heading-text-color;
  }

  .panel-footer {
    + .panel-collapse > .panel-body {
      border-bottom-color: $border;
    }
  }
}


.panel-default {
  @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
  .panel-title {
    color: $headings-color;
  }
}
.panel-primary {
  @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
}
.panel-success {
  @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
}
.panel-info {
  @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
}
.panel-warning {
  @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
}
.panel-danger {
  @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
}

.panel-dark {
  @include panel-variant($panel-dark-border, $panel-dark-text, $panel-dark-heading-bg, $panel-dark-border);
}

.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger,
.panel-dark {
  border: none;

  .panel-heading {
    border: none;
  }

  .panel-title {
    color: $panel-colored-title-color;
  }

  .panel-action {
    color: $panel-colored-action-color;
  }
}

// Panel-line
// ========================================================================

@mixin panel-line-variant($heading-border-color) {
  .panel-heading {
    color: $heading-border-color;
    border-top-color: $heading-border-color;
    background: transparent;
  }

  .panel-title {
    color: $heading-border-color;
  }

  .panel-action {
    color: $heading-border-color;
  }
}

.panel-line {
  .panel-heading {
    background: transparent;
    border: none;
    border-top: 3px solid transparent;
  }

  &.panel-default {
    @include panel-line-variant($panel-default-heading-bg);

    .panel-title {
      color: $headings-color;
    }

    .panel-action {
      color: $panel-action-color;
    }
  }
  &.panel-primary {
    @include panel-line-variant($panel-primary-heading-bg);
  }
  &.panel-success {
    @include panel-line-variant($panel-success-heading-bg);
  }
  &.panel-info {
    @include panel-line-variant($panel-info-heading-bg);
  }
  &.panel-warning {
    @include panel-line-variant($panel-warning-heading-bg);
  }
  &.panel-danger {
    @include panel-line-variant($panel-danger-heading-bg);
  }

  &.panel-dark {
    @include panel-line-variant($panel-dark-heading-bg);
  }

}