$transition-duration: $global-transition-duration;
.panel {
  $border-radius: 10px;
  border-radius: $border-radius;
  background-color: $panel-background-color;
  color: $selected-text;
  display: flex;
  flex-direction: column;
  box-shadow: 0 rem-calc(4px) rem-calc(16px) $subtle-shadow-color;

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

  &__heading {
    background-color: $panel-heading-color;
    color: $selected-text;
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }
  &__heading + &__body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  &__footer {
    background-color: $panel-heading-color;
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
    &--padded {
      padding: em-calc(15px);
    }
  }
  &__heading, &__footer {
    padding: 0 0.5em 0 1em;
    display: flex;
    align-items: center;
    min-height: 2em;
    &__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;
      &__sub-label {
        color: $ui-4-color;
        text-transform: none;
        letter-spacing: normal;
        margin-left: map-get($spacingSizes, 'medium');
        a {
          color: $muted-icon-color;
          background-color: $input-background-color;
          border-radius: 2px;
          padding: 5px;
        }
      }
    }
    &__tab-group, &__button-group, &__icon-group {
      flex: 0 0 auto;
    }

    $spacing: em-calc(22px);

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

    &__tab-group + &__action-group::before {
      content: "";
      display: inline-block;
      width: rem-calc(1px);
      height: 1em;
      margin-left: $spacing;
      background-color: $panel-border-color;
    }

    &__action-group {
      display: flex;
      align-items: center;
      &__action {
        margin-left: $spacing;
        padding: 0 em-calc(2px);
      }
    }
  }
  &__body {

    background-image: radial-gradient($panel-gradient-inner-color, $panel-gradient-outer-color);
    border-radius: $border-radius;
    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;
      }
    }
  }
}