// ============================================================================
// :: Tabs
// ============================================================================
/**
 * List of items that represent tabs to switch between. When switching a tab
 * the linked content should switch as well.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-tabs {
  display: flex;
  justify-content: flex-start;
  padding: 0;

  // border-bottom: 1px solid $bp-border-color-base;

  list-style-type: none;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-tabs__item {
  position: relative;
  top: 0.1rem;

  // Use 1px negative margin-right to hide the double borders on the right side
  margin-right: -0.1rem;
}

.bp-tabs__item-link {
  display: block;
  padding: 1.5rem 2.5rem;

  font-size: $bp-font-size-base;
  line-height: $line-height-normalize;
  text-decoration: none;

  color: $bp-text-color-base;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 2px solid transparent;

  transition: color 0.2s ease-in-out;

  &:hover {
    color: $bp-primary-color;
  }
}

// ============================================================================
// :: States
// ============================================================================
.bp-tabs__item {

  &.is-active {
    z-index: $bp-z-index-floor + 1;

    .bp-tabs__item-link {
      border-color: $bp-border-color-base;
      /**
       * Set the border bottom color equal to the default background color
       * to blend in the bottom border
       */
      border-bottom-color: $bp-background-color-base;
      color: $bp-primary-color;
    }
  }
}