@mixin panel-theme($name, $color, $fontColor: #fff) {
  &.ui-#{$name} {
    ui-panel-header {
      color: $color;
    }
    &.ui-fill {
      ui-panel-header {
        border: 0;
        background-color: $color;
        border-bottom-color: $color;
        color: $fontColor;
      }
    }
  }
}

ui-panel {
  display: block;
  box-shadow: 0 0 3px rgba(0, 0, 0, .1);
  background-color: #fff;
  border-radius: 3px;
  padding-left: $container-horizontal-padding;
  padding-right: $container-horizontal-padding;
  margin-top: 1em;
  margin-bottom: 1em;
  &.ui-fill {
    padding-left: 0;
    padding-right: 0;
    border: 0;
    ui-panel-header, ui-panel-footer {
      padding-left: $container-horizontal-padding;
      padding-right: $container-horizontal-padding;
    }
  }
  &.ui-default {
    &.ui-fill {
      ui-panel-header {
        background-color: $color-lighter;
      }
    }
  }
  @include panel-theme(dark, $color-dark);
  @include panel-theme(primary, $color-primary);
  @include panel-theme(info, $color-info);
  @include panel-theme(success, $color-success);
  @include panel-theme(warning, $color-warning);
  @include panel-theme(danger, $color-danger);
}