.tabs {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;

   .nav-link {
      @include underline-never;

      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-weight: $font-weight-medium;
      margin: 0 20px;
      position: relative;
      padding: 20px 0;
      z-index: 1;


      &::before {
         content: '';
         display: block;
         position: absolute;
         left: 0;
         right: 0;
         bottom: -1px;
         border-top: 1px solid transparent;
         transition: border-color $transition-speed;
      }

      &:hover,
      &:focus,
      &.active {
         color: $text-dark;

         &::before {
            border-top-color: $black;
         }
      }
   }

   @media screen and (min-width: $sm) {
      .nav-link {
         order: -1;

         &:last-child {
            margin-right: 0;
         }
      }
   }

   @media screen and (max-width: $sm - 1) {
      .nav-link {
         @include delete-before;

         width: 100%;
         cursor: default;
      }
   }
}
