//
// Table Panel
// --------------------------------------------------

.table-panel {
  $line-width: ceil($grid-unit-x * 0.5);

  position: relative;
  display: flex;

  // Elements

  &-item {
    display: flex;
    flex: 1;
    padding: $grid-unit-y * 2 $grid-unit-x;
    line-height: $grid-unit-y * 3;
    align-items: center;

    &:first-child {
      padding-left: $grid-unit-x * 3;
    }

    &:last-child {
      padding-right: $grid-unit-x * 3;
    }

    // Variations

    &-f-2 {
      flex: 2 2 0;
    }

    &-f-auto {
      flex: 0 0 auto;
      width: auto;
    }

    &-overflow-hidden {
      min-width: 0;

      @include text-overflow();
    }

    &-strong {
      font-size: $font-size-h4;
      font-weight: $font-weight-medium;

      @include text-responsive($font-size-h4);
    }

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

    &-title {
      font-size: $font-size-large;
    }

    &-subtitle {
      font-size: $font-size-base;

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

    &-arrow {
      $size: $grid-unit-y * 3;

      flex: 0 0 ($size + $grid-unit-x * 4);
      width: $size + $grid-unit-x * 4;

      a {
        &:before {
          content: "\f107";
          font-family: $font-family-awesome;
          font-weight: 300;
          font-size: $font-size-h4;
          width: $size;
          height: $size;
          line-height: $size;
          text-align: center;
          display: block;

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

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

      &-closed {
        a:before {
          @include transform(rotate(180deg));
        }
      }
    }
  }

  // Variations

  &-header {
    height: $grid-unit-y * 5;
    margin-bottom: ceil($grid-unit-y * 1.5);
    align-items: center;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    text-transform: uppercase;
    border-radius: $border-radius-base;

    @include themes(background-color, panel-bg);
    @include themes(color, color-new-body-light);

    &-transparent {
      background-color: transparent;
      height: auto;

      @include box-shadow(none);

      .table-panel-item {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }

  &-body {
    align-items: start;
    border-radius: $border-radius-base;
    margin-bottom: $grid-unit-y;
    font-size: $font-size-large;
    min-height: $grid-unit-y * 7;

    @include themes(background-color, panel-bg);
    @include themes(color, color-new-heading);

    &:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: $line-width;
      background-color: $brand-success;
      border-top-left-radius: $panel-border-radius;
      border-bottom-left-radius: $panel-border-radius;
    }

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

    // Elements

    &-container {
      display: flex;
      align-items: center;
    }

    &-collapse {
      padding: 0 $grid-unit-y * 3 0 $grid-unit-y * 3;
    }

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

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

    // Color variations

    &-danger {
      &:after {
        background-color: $brand-danger;
      }
    }

    &-warning {
      &:after {
        background-color: $brand-warning;
      }
    }

    // Style variations

    &-no-border {
      &:after {
        content: none;
      }
    }
  }

  // Variations
  &-striped {
    &.table-panel-body {
      padding: $grid-unit-y * 2;
      border-radius: $panel-border-radius;
      min-height: $grid-unit-y * 5;
      font-size: $font-size-base;

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

      &:after {
        content: none;
      }

      .form-control.input-sm {
        width: auto;
        max-width: $grid-unit-x * 8;
        text-align: center;
        padding-left: $grid-unit-x;
        padding-right: 0;
      }

      .table-panel-item-title {
        line-height: $grid-unit-y * 2;
      }

      .table-panel-item-subtitle {
        font-size: $font-size-small;
        line-height: $grid-unit-y * 2;

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

      a {
        @include themes(color, table-panel-striped-link-color);

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

  &-bordered {
    &.table-panel-body {
      @include border-radius($panel-border-radius);
      @include themes-border(color-new-border);

      .table-panel-item {
        padding-top: $panel-padding-y;
        padding-bottom: $panel-padding-y;
      }
    }
  }
}