.search-tabs {
   display: flex;
   flex-wrap: wrap;

   .nav-link {
      @include underline-never;

      display: flex;
      align-items: center;
      justify-content: flex-start;
      z-index: 1;
      position: relative;
      padding-bottom: 5px;


      &::before {
         content: '';
         display: block;
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
         border-top: 2px 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;
         margin-right: 30px;
         margin-bottom: 10px;

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

         &.active {
            pointer-events: none;
         }
      }
   }

   @media screen and (max-width: $lg - 1) {
      .nav-link::before {
         display: none;
      }

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

         width: 100%;
         cursor: default;
         font-size: $font-size-base;

         &::after {
            @include fonticon;

            content: $icons_caret-down;
            font-size: 12px;
            right: 15px;
            position: absolute;
            transition: all $transition-speed;
         }

         &.active {
            &::after {
               transform: rotate(180deg);
            }
         }
      }

      .tab-pane {
         display: none;

         > div {
            opacity: 0;
         }

         &.active {
            display: block;

            > div {
               opacity: 1;
            }
         }
      }
   }
}
