nav {
  width: 100%;
}

.nav {
  @extend .padding-inline-0;
  list-style: none;
  &-link {
    padding: $nav-link-padding;
    &-is-active {
      color: $nav-breacrumbs-link-color;
    }
  }

  &-item,
  &-link {
    line-height: $nav-line-height;
  }

  &-link {
    height: 100%;
    width: 100%;
    font-size: $nav-link-font-size;
    text-decoration: none;
    color: $nav-link-default-color;

    &:hover {
      color: $nav-link-hover-color;
    }
  }
  &.breadcrumbs {
    li {
      a {
        display: initial;
        color: $nav-breacrumbs-link-color;
        &.is-active {
          color: $nav-breacrumbs-link-active-color;
        }
      }
      &:not(:first-child) {
        &::before {
          display: inline-block;
          padding-right: 0.5rem;
          padding-left: 0.5rem;
          color: #6c757d;
          content: "/";
        }
      }
    }
  }
  // tabs
  &.tabs{
    @extend .bb;//adds border bottom
    .nav{
      &-link{
        position: relative;
        &:hover{
          &::after {
            background-color: $active-tab-background-color ;
          }
        }
        &::after {
          width: 0%;
          content: "";
          height: 1px;
          display: block;
          position: absolute;
          bottom: -1px;
          left: 0;
          transition: $active-tab-transition;
        }

        &.is-active{
          color: $active-tab-color;
          &::after {
            width: 100%;
            background-color: $active-tab-background-color ;
          }
        }
      }
      
    }

    &.outline{
      .nav{
        &-link{
          
          &.is-active{
            @extend .bt;
            @extend .bx;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;

            &::after{
              transition: none;
            }
          }
          
          &::after{
            transition: none;
            background-color: white;
          }
        }
    }
  }}
}
.horizontal,
.breadcrumbs,.tabs{
  display: flex;
  &.full{
      width: 100%;
     li{
      flex-grow: 1;
      flex-shrink: 0;
    }
    a{
      text-align: center;
    }
  }
}