@import "palette";
@import "variables";
@import "mixins/fontSize";

$transition-duration: $global-transition-duration;
.panel {
  @include border($panel-border-color);
  background-color: $panel-background-color;
  color: $selected-text;
  display: flex;
  flex-direction: column;

  &--fill-parent {
    height: 100%;
    width: 100%;
  }

  &__heading {
    background-color: $panel-heading-color;
    border-bottom: 1px solid $panel-border-color;
    color: $selected-text;
  }
  &__footer {
    background-color: $panel-heading-color;
    border-top: 1px solid $panel-border-color;
    &--padded {
      padding: em-calc(15px);
    }
  }
  &__heading, &__footer {
    padding: em-calc(12px) em-calc(20px) em-calc(12px);
    display: flex;
    align-items: center;
    min-height: em-calc(46px);
    &__label {
      @include font-size(13px);
      letter-spacing: em-calc(1.25px);
      flex: 1 0 1px;
      width: 0; /* prevents overflow from affecting container width */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: uppercase;
    }
    &__tab-group, &__button-group, &__icon-group {
      flex: 0 0 auto;
    }

    &__tab-group {
      margin: em-calc(-4px) 0;
      &__tab {
        @include font-size(13px);
        color: $unselected-text;
        cursor: pointer;
        display: inline-block;
        margin-left: em-calc(18px);
        padding: 0 em-calc(2px) em-calc(2px);
        position: relative;
        text-transform: uppercase;
        text-decoration: none;
        transition: color $transition-duration;
        &:hover, &--active {
          color: $pink-color;
        }
        &--active {
          cursor: default;
          border-bottom: 2px solid $pink-color;
        }
      }
    }

    &__button-group {
      margin-top: em-calc(-2px);
      &__button {
        @include font-size(13px);
        display: inline-block;
        padding: 0 em-calc(8px);
        margin-left: em-calc(10px);
      }
    }

    &__icon-group {
      padding: em-calc(6px) em-calc(2px) em-calc(8px) em-calc(2px);
      &__icon {
        display: inline-block;
        padding: em-calc(2px) em-calc(6px);
        & > span {
          padding: 0;
        }
      }
      &--delimited {
        border-right: 1px solid $panel-border-color;
        &:last-child {
          border-right: none;
        }
      }
      &--right {
        text-align: right;
        flex: 1 0 auto;
      }
    }
  }
  &__body {
    background-color: $panel-background-color;
    padding: em-calc(20px);
    flex: 1 1 auto;
    position: relative;
    &--no-padding {
      padding: 0;
    }

    table {
      width: 100%;
      max-width: 100%;
      table-layout: fixed;
    }
  }

  .list-group {
    margin: 0;
    &__item {
      border-top: 1px solid darken($panel-border-color, 2%);
      border-left: none;
      border-right: none;
      border-bottom: none;
      border-radius: 0;
      padding: em-calc(8px) em-calc(10px);

      &:first-child {
        border-top: none;
      }
    }
  }
}