.tabs-nav {
   &__list {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      margin: 0 -10px;

      @include _Tablet {
         margin: 0;
         flex-wrap: wrap;
         overflow-x: visible;
      }
   }

   &__item {
      border: 1px solid #231f201a;

      border-radius: 4px;
      padding: 8px 16px;
      color: cl("dark-text");
      cursor: pointer;
      position: relative;
      overflow: hidden;
      line-height: 0.5;

      font-size: rem(12);

      white-space: nowrap;
      flex-shrink: 0;

      @include _XSDesktop {
         font-size: rem(10);
      }

      @include _HDesktop {
         font-size: rem(14);
      }

      &:first-child {
         margin-left: 10px;

         @include _Tablet {
            margin-left: 0;
         }
      }

      span {
         position: relative;
         z-index: 1;
      }

      &::before {
         content: "";
         background-color: cl("accent");
         position: absolute;
         width: 0;
         top: 0;
         left: 0;
         height: 100%;
         z-index: 0;

         transition: width 0.3s ease;
      }

      &.active {
         border-color: cl("accent");
         color: #fff;
         transition: color 0.3s ease;
         &::before {
            width: 100%;
         }
      }
   }
}

.tabs-nav.white .tabs-nav {
   &__item {
      border: 1px solid #ffffff33;
      color: #fff;
   }
}
