// vf-tabs

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

.vf-tabs__list {
  @include set-type(text-body--2, $custom-margin-bottom: 0);
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0;
  position: relative;

  &::before {
    border-bottom: 2px solid neutral(900);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1984;
  }
}

.vf-tabs__item {
  display: inline-block;
  position: relative;
}

.vf-tabs__link {
  @include set-type(text-body--2, $custom-margin-bottom: 0);

  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 4px;
  color: neutral(700);
  display: block;
  outline: 0;
  padding: 8px 16px;
  position: relative;
  text-decoration: none;

  &:hover,
  &:focus {
    border-bottom-color: neutral(700);
    color: neutral(900);
    z-index: 5150;
  }
  &:focus:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
  }

}

.vf-tabs__link.is-active {
  border-bottom-color: interactive-color(default);
  color: interactive-color(default);
  text-shadow: 1px 0 0 currentColor; // faux bold so there won't be any layour shift
  z-index: 1800;

  &:hover,
  &:focus {
    color: interactive-color(default);
  }
}

.vf-tabs__section {
  padding: 8px 16px;
}

.vf-tabs__item {
  flex-basis: max-content;
}