@import '../utils/theme/variables.scss';
$tab-background: $brc-white !default;
$tab-background-active: $brc-white !default;
$tab-border-color: $brc-silver !default;
$tab-border-color-active: $brc-azure !default;
$tab-border-height: 1px !default;
$tab-border-height-active: 3px !default;
$tab-color: $brc-coolGrey !default;
$tab-color-active: $brc-darkGreyBlue !default;
$tab-icon-margin-right: 8px !default;

@import '~sass-flex-mixins/src/sass-flex-mixins.scss';

.panel.tabbed-panel {
  > .panel-header {
    padding: 0;
    border-bottom: 0;
    min-height: 70px;

    .panel-header-content {
      padding: 0;

      @include flex_align_items(stretch);
    }

    .tabbed-panel-tab {
      border-bottom: $tab-border-height solid $tab-border-color;
      background: $tab-background;
      cursor: pointer;
      color: $tab-color;
      fill: currentColor;

      &.active {
        border-bottom: $tab-border-height-active solid $tab-border-color-active;
        color: $tab-color-active;
      }

      .tabbed-panel-tab-icon {
        margin-right: $tab-icon-margin-right;
      }
    }
  }
}
