@import '../../thems/mixins';

$border-bottom-width: 0.15rem;
$border-left-width: 0.25rem;

// Tabs
.tab {
  align-items: center;
  border-bottom: $border-width solid;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  @include useTheme('border-color', 'border-color');

  .tab-item {
    margin-top: 0;
    flex: 1 0 0;
    text-align: center;
    @include text-gray(0.7);
    a {
      border-bottom: $border-bottom-width solid transparent;
      color: inherit;
      display: block;
      margin: 0;
      padding: $unit-5 $unit-1 $unit-5 - $border-bottom-width $unit-1;
      text-decoration: none;
      &:focus {
        box-shadow: none;
      }
    }
    &.active a {
      @include useTheme('border-bottom-color', 'primary-color-light');
      @include useTheme('color', 'font-color');
      font-weight: bold;
    }
  }
}

.tab.tab-vertical {
  display: block;
  border-bottom: none;

  .tab-item {
    margin-top: 0;
    text-align: left;
    @include text-gray(0.7);
    a {
      border-left: $border-left-width solid transparent;
      border-bottom: none;
      margin: 0 $unit-2 0 0;
      padding: $unit-3 $unit-1 $unit-3 $unit-5;
    }
    &.active a {
      @include useTheme('border-left-color', 'primary-color-light');
    }

    .btn-clear {
      margin-top: -$unit-1;
    }
  }
}