<commit_before>// Tabs
$tab-border-width: 1px;

@mixin tabstrip-container {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: -$tab-border-width;
}

@mixin tabstrip-item {
  background: #f4f4f4;
  height: 40px;
  padding: 0 1rem;
  line-height: 40px;
  border: 0px solid #ddd;
  border-width: $tab-border-width $tab-border-width $tab-border-width 0;
  margin: 0;
  flex: 1 1 shrink;
  cursor: pointer;
  &.is-active {
    background: #fff;
    color: $primary-color;
    border-width: $tab-border-width $tab-border-width 0 0;
  }
  &:hover {
    background: #e4e4e4;
  }
}

@mixin tab-content {
  flex: 0 0 auto;
  flex-basis: 100%;
  width: 100%;
  padding: 1rem;
  border: 0 solid #ddd;
  border-width: $tab-border-width;
}

@mixin tab-content-item {
  display: none;
  &.is-active {
    display: block;
  }
}

.tabs {
  @include tabstrip-container;
<commit_msg>Add settings variables to tabs<commit_after>/*
  TABS
  ----
*/

$tab-border-width: 1px;
$tab-border-color: #ddd;

$tab-title-background: #f4f4f4;
$tab-title-background-hover: #e4e4e4;
$tab-title-background-active: #fff;
$tab-title-color: isitlight($tab-title-background);
$tab-title-color-active: $primary-color;

$tab-title-padding: ($global-padding * 0.75) $global-padding;
$tab-content-padding: $global-padding;

%tabstrip-container {
  display: flex;
  flex-flow: row wrap;
}

@mixin tabstrip-container {
  @extend %tabstrip-container;
}

@mixin tabstrip-item {
  background: $tab-title-background;
  padding: $tab-title-padding;
  line-height: 1;
  border: $tab-border-width solid $tab-border-color;
  border-left-width: 0;
  margin: 0;
  flex: 0 1 auto;
  cursor: pointer;
  color: $tab-title-color;

  &:first-child {
    border-left-width: $tab-border-width;
  }

  &.is-active {
    background: $tab-title-background-active;
    color: $tab-title-color-active;
    border-bottom-color: $tab-title-background-active;

    &:hover {
      background: $tab-title-background-active;
    }
  }
  &:hover {
    background: $tab-title-background-hover;
  }
}

@mixin tab-content {
  padding: $tab-content-padding;
  border: 0 solid $tab-border-color;
  border-width: $tab-border-width;
  margin-top: -$tab-border-width;
}

@mixin tab-content-item {
  display: none;
  &.is-active {
    display: block;
  }
}

/*
  CSS Output
*/

.tabs {
  @include tabstrip-container;

{'fraction_non_alphanumeric': 0.1605465414175918, 'fraction_numerical': 0.01964133219470538, 'mean_word_length': 3.306985294117647, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5660640', 'n_tokens_mistral': 949, 'n_tokens_neox': 908, 'n_words': 182}