@layer components {
  .nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }

  .nav>li {
    position: relative;
    display: block;
  }

  .nav>li>a {
    @apply tw-relative tw-block tw-px-3.5 tw-py-2.5;
  }

  .nav>li.disabled>a {
    @apply tw-text-neutral-400;
  }

  .nav>li.disabled>a:hover,
  .nav>li.disabled>a:focus {
    @apply tw-text-neutral-400 tw-no-underline tw-cursor-not-allowed tw-bg-transparent;
  }

  .nav .open>a,
  .nav .open>a:hover,
  .nav .open>a:focus {
    @apply tw-bg-neutral-50 tw-border-primary-600;
  }

  .nav .nav-divider {
    @apply tw-bg-neutral-200;
  }

  .nav>li>a>img {
    max-width: none;
  }

  .tab-separator {
    @apply tw-border-r tw-border-solid tw-border-neutral-200;
  }

  .nav-tabs {
    @apply tw-mb-7 tw-border-b tw-border-neutral-200 tw-bg-transparent;
  }

  .nav-tabs>li {
    border-bottom: 0;
  }

  .nav-tabs>li>a {
    @apply tw-border-0 tw-bg-transparent tw-text-neutral-600 tw-font-medium tw-px-3 tw-py-2.5;
  }

  .nav-tabs>li>a>.caret {
    @apply ltr:!tw-ml-1.5 rtl:tw-mr-1.5;
  }

  .nav>li>a:hover,
  .nav>li>a:focus {
    @apply tw-bg-transparent tw-text-neutral-900;
  }

  .nav-tabs>li>a:hover {
    @apply tw-border-b tw-border-neutral-300;
  }

  .nav-tabs>li.active>a,
  .nav-tabs>li.active>a:hover,
  .nav-tabs>li.active>a:focus {
    @apply tw-border-0 tw-rounded-none tw-border-b tw-border-solid tw-border-neutral-900 tw-text-neutral-900 tw-bg-transparent tw-mb-px;
  }

  .nav-tabs>li a i.menu-icon {
    @apply tw-w-4 tw-h-auto tw-text-neutral-600 tw-text-[16px] ltr:tw-mr-1 rtl:tw-ml-1 tw-align-middle -tw-mt-px;
  }

  .nav-tabs>li>a:hover i.menu-icon,
  .nav-tabs>li>a:focus i.menu-icon {
    @apply tw-text-neutral-900;
  }

  .nav-tabs>li.active>a i.menu-icon,
  .nav-tabs>li.active>a:hover i.menu-icon,
  .nav-tabs>li.active>a:focus i.menu-icon {
    @apply tw-text-neutral-900;
  }

  .nav-tabs.nav-justified {
    width: 100%;
    border-bottom: 0;
  }

  .nav-tabs.nav-justified>li {
    float: none;
  }

  .nav-tabs.nav-justified>li>a {
    margin-bottom: 5px;
    text-align: center;
  }

  .nav-tabs.nav-justified>.dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @media (min-width: 768px) {
    .nav-tabs.nav-justified>li {
      display: table-cell;
      width: 1%;
    }

    .nav-tabs.nav-justified>li>a {
      margin-bottom: 0;
    }
  }

  .nav-tabs.nav-justified>li>a {
    margin-right: 0;
    border-radius: 4px;
  }

  .nav-tabs.nav-justified>.active>a,
  .nav-tabs.nav-justified>.active>a:hover,
  .nav-tabs.nav-justified>.active>a:focus {
    border: 1px solid #ddd;
  }

  @media (min-width: 768px) {
    .nav-tabs.nav-justified>li>a {
      border-bottom: 1px solid #ddd;
      border-radius: 4px 4px 0 0;
    }

    .nav-tabs.nav-justified>.active>a,
    .nav-tabs.nav-justified>.active>a:hover,
    .nav-tabs.nav-justified>.active>a:focus {
      border-bottom-color: #fff;
    }
  }

  .nav-pills>li {
    float: left;
  }

  .nav-pills>li>a {
    border-radius: 4px;
  }

  .nav-pills>li+li {
    margin-left: 2px;
  }

  .nav-pills>li.active>a,
  .nav-pills>li.active>a:hover,
  .nav-pills>li.active>a:focus {
    color: #fff;
    background-color: #337ab7;
  }

  .nav-stacked>li {
    float: none;
  }

  .nav-stacked>li+li {
    margin-top: 2px;
    margin-left: 0;
  }

  .nav-justified {
    width: 100%;
  }

  .nav-justified>li {
    float: none;
  }

  .nav-justified>li>a {
    margin-bottom: 5px;
    text-align: center;
  }

  .nav-justified>.dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @media (min-width: 768px) {
    .nav-justified>li {
      display: table-cell;
      width: 1%;
    }

    .nav-justified>li>a {
      margin-bottom: 0;
    }
  }

  .nav-tabs-justified {
    border-bottom: 0;
  }

  .nav-tabs-justified>li>a {
    margin-right: 0;
    border-radius: 4px;
  }

  .nav-tabs-justified>.active>a,
  .nav-tabs-justified>.active>a:hover,
  .nav-tabs-justified>.active>a:focus {
    border: 1px solid #ddd;
  }

  @media (min-width: 768px) {
    .nav-tabs-justified>li>a {
      border-bottom: 1px solid #ddd;
      border-radius: 4px 4px 0 0;
    }

    .nav-tabs-justified>.active>a,
    .nav-tabs-justified>.active>a:hover,
    .nav-tabs-justified>.active>a:focus {
      border-bottom-color: #fff;
    }
  }

  .tab-content>.tab-pane {
    display: none;
  }

  .tab-content>.active {
    display: block;
  }

  .nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .navbar-pills-flat {
    @apply tw-bg-white tw-shadow-sm tw-border tw-border-solid tw-border-neutral-300 tw-rounded-md;
  }

  .navbar-pills-flat>li>a {
    @apply tw-border-b tw-border-neutral-100 tw-mb-0 tw-px-3.5 tw-py-2 tw-mr-0 tw-text-neutral-500 tw-font-medium;
  }

  .navbar-pills-flat>li:first-child a {
    @apply tw-rounded-t-md;
  }

  .navbar-pills-flat>li:last-child a {
    @apply tw-rounded-b-md;
  }

  .navbar-pills-flat>li>a:hover {
    @apply tw-border-neutral-100;
  }

  .navbar-pills-flat>li.active>a,
  .navbar-pills-flat>li.active>a:hover,
  .navbar-pills-flat>li.active>a:focus {
    @apply tw-border-neutral-100;
  }

  .navbar-pills-flat>li a i.menu-icon {
    @apply tw-mr-4;
  }

  @media (max-width: 768px) {
    /* .nav-tabs > li {
      width: 100%;
    }

    .nav-tabs > li > a {
      border-radius: 0;
    } */
  }

  .horizontal-scrollable-tabs .arrow-right {
    @apply tw-float-right;
  }

  .horizontal-scrollable-tabs .arrow-left {
    @apply tw-float-left;
  }

  .horizontal-scrollable-tabs .scroller {
    @apply tw-text-[0.86rem] tw-hidden tw-bg-transparent tw-font-semibold tw-cursor-pointer tw-text-neutral-600 tw-border-b tw-border-solid tw-border-neutral-200 tw-p-2.5 hover:tw-text-neutral-500 tw-mb-px tw-bg-neutral-100;
  }

  .horizontal-scrollable-tabs .scroller.disabled {
    @apply tw-cursor-not-allowed;
  }

  .horizontal-scrollable-tabs .scroller.disabled i {
    @apply tw-opacity-40;
  }

  .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
    @apply tw-overflow-x-auto tw-overflow-y-hidden tw-snap-x tw-snap-mandatory;
  }

  .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
    display: -webkit-box;
    display: -moz-box;
  }

  /* As it has a mobile focus the scrollbar is removed */
  .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal::-webkit-scrollbar {
    width: 0 !important;
  }

  .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal>li {
    @apply tw-min-w-[50px] tw-float-none tw-text-center tw-snap-normal tw-snap-end;
  }

  .firefox .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
    overflow: -moz-scrollbars-none;
  }

  .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .horizontal-scrollable-tabs .tabs-submenu-wrapper li {
    position: static;
  }

  .horizontal-scrollable-tabs .tabs-submenu-wrapper {
    position: absolute;
    z-index: 10;
    display: none;
  }

  .nav-tabs-segmented.nav-tabs,
  .nav-tabs-segmented>li>a,
  .nav-tabs-segmented>li.active>a {
    @apply tw-border-b-0;
  }

  .nav-tabs-segmented,
  .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal.nav-tabs-segmented {
    @apply tw-bg-neutral-300/30 tw-p-1 tw-rounded-lg;
  }

  .nav-tabs-segmented>li>a>.badge {
    @apply tw-bg-neutral-200 tw-ml-1;
  }

  .nav-tabs-segmented>li>a {
    @apply tw-text-neutral-800;
  }

  .nav-tabs-segmented>li.active>a,
  .nav-tabs-segmented .open>a,
  .nav-tabs-segmented .open>a:hover,
  .nav-tabs-segmented .open>a:focus {
    @apply tw-bg-white tw-rounded-lg tw-shadow-sm;
  }

  .nav-tabs-segmented>li>a:hover,
  .nav-tabs-segmented>li>a:focus {
    @apply tw-border-b-0;
  }

  .nav-tabs-segmented>li.active>a:hover,
  .nav-tabs-segmented>li.active>a:focus {
    @apply tw-border-0 tw-bg-white tw-rounded-lg;
  }

  .nav-tabs-segmented>li.active>a:hover,
  .nav-tabs-segmented>li.active>a:focus {
    @apply tw-border-0 tw-bg-white tw-rounded-lg;
  }

  .horizontal-scrollable-tabs:has(.nav-tabs-segmented) .scroller {
    @apply tw-relative tw-bg-[#edeff1] tw-border-0 tw-py-[calc(theme(spacing.3)+1px)] [&>i]:tw-mt-1;
  }

  .horizontal-scrollable-tabs:has(.nav-tabs-segmented) .scroller.disabled {
    @apply !tw-opacity-100 [&>i]:tw-opacity-40;
  }

  .horizontal-scrollable-tabs:has(.nav-tabs-segmented) .arrow-left {
    @apply tw-rounded-l-lg tw-pr-3 -tw-mr-1;
  }

  .horizontal-scrollable-tabs:has(.nav-tabs-segmented) .arrow-right {
    @apply tw-rounded-r-lg tw-pl-3 -tw-ml-1;
  }
}