// TABS
.c-tabs {
  display: flex;
  overflow: hidden;
  margin: $space-0;
  padding: $space-0;
  white-space: nowrap;
  align-items: stretch;
  height: $tabs-height;
  font-size: $tabs-font-size;
  box-shadow: $tabs-box-shadow;
  font-family: $tabs-font-family;
  font-weight: $tabs-font-weight;

  .c-tab-item {
    display: flex;
    color: $tabs-color;
    align-items: center;
    justify-content: center;

    &-link {
      flex: auto;
      cursor: pointer;
      margin: $space-0;
      color: $tabs-color;
      text-align: center;
      text-decoration: none;
      padding: $tabs-padding;
      justify-content: center;
      transition: $tabs-hover-transition;
      border-bottom: $tabs-border-bottom solid transparent;

      a {
        color: $tabs-color-active;
      }

      &:hover {
        color: $tabs-color-hover;
        border-bottom: $tabs-border-bottom solid $tabs-border-hover;
      }

      &-active {
        &,
        & a {
          color: $tabs-color-active;
        }

        &,
        &:hover {
          border-bottom-style: solid;
          border-bottom-color: $tabs-border-active;
          border-bottom-width: $tabs-border-bottom;
        }
      }

      &-disabled {
        &,
        & a,
        &:hover,
        &:focus,
        &:active {
          cursor: not-allowed;
          color: $tabs-color-disabled;
        }

        &,
        &:hover,
        &:focus,
        &:active {
          border-bottom-style: solid;
          border-bottom-color: transparent;
        }
      }
    }
  }

  &-right {
    justify-content: flex-end;
  }

  &-center {
    flex: none;
    justify-content: center;
  }

  &-fullwidth {
    .c-tab-item {
      flex: 1;
    }
  }
}


// TABS BORDERED
.c-tabs-bordered {
  border: $tabs-border;
  background-color: $tabs-bordered-bg;
  border-radius: $tabs-bordered-radius;
  border-bottom: 0;

  .c-tab-item {
    height: $tabs-height;

    &-link {
      box-shadow: none;
      transition: none;
      height: $tabs-height;
      border-right: $tabs-border;
      border-bottom: 1px solid $color-white;

      &:hover:not(.c-tab-item-link-disabled) {
        box-shadow: none;
        color: $tabs-color-hover;
        background: $tabs-bordered-bg-hover;
        border-bottom: 2px solid $color-gray-2;
      }

      &-active {
        color: $tabs-border-active;
        border-bottom-color: $color-white;
        background: $tabs-bordered-bg-active;

        &:hover {
          color: $tabs-border-active !important;
          border-bottom: $tabs-border !important;
        }
      }
    }
  }

  &.c-tabs-right {
    .c-tab-item-link {
      border-left: $tabs-border;
    }

    .c-tab-item-link:last-child {
      /* stylelint-disable */
      margin-right: -1px;
      /* stylelint-enable */
    }
  }

  &.c-tabs-center {
    .c-tab-item-link:first-child {
      border-left: $tabs-border;
    }

    .c-tab-item-link:last-child {
      /* stylelint-disable */
      margin-right: -1px;
      /* stylelint-enable */
    }
  }
}


// All default size classes
@each $name, $data in $tabs-sizes {
  $height: map-get($data, height);
  $font-size: map-get($data, font-size);
  $line-height: map-get($data, line-height);
  $padding: map-get($data, padding);

  .c-tabs-#{$name} {
    height: $height;

    .c-tab-item-link {
      height: $height;
      font-size: $font-size;
      padding: $padding;
    }

    &.c-tabs-bordered .c-tab-item {
      height: $height;
    }
  }
}