/*╔══════════════════════════════════════════════════╗
  ║                         Tabable                           ║
  ╚══════════════════════════════════════════════════╝*/

.nav-tabs {
  position: relative;

  margin: $grid-gutter-space 0;

  border-bottom: 0;

  @extend %list-reset;

  &::before {
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;

    background: var(--tabs-base);
    content: "";

    z-index: 1;
  }

  &.inside::before {
    left: -($grid-gutter-width / 2);

    width: calc(100% + 40px);
  }

  a {
    text-decoration: none;
  }

  .nav-link {
    margin-right: -1px;

    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);

    &:hover {
      border-color: var(--tabs-border) var(--tabs-border) transparent;
    }
  }

  .nav-item {
    z-index: 2;
  }

  .nav-item.show .nav-link,
  .nav-link.active {
    margin-top: -6px;
    padding-top: 10px;
    padding-bottom: 12px;

    border-color: var(--tabs-border) var(--tabs-border) transparent;

    background: var(--tabs-background);
  }
}