.tabs-wrapper {
  .tabs-lists {
    @apply p-0 list-none flex flex-wrap flex-col md:flex-row;
  }
  .tab-link {
    @apply inline-block w-full text-lg px-4 py-2 cursor-pointer transition-all duration-500 ease-in-out bg-slate-100;
    &.is-active,
    &:hover {
      @apply no-underline bg-primary-700 text-white;
    }
  }
  &.is-underline {
    .tab-link {
      @apply border-b-4 border-gray-100 bg-transparent;
      &.is-active,
      &:hover {
        @apply text-primary-700 border-primary-700;
      }
    }
  }
  &.is-left-border {
    .tab-link {
      @apply border-l-4 border-gray-100 bg-transparent;
      &.is-active,
      &:hover {
        @apply text-primary-700 border-primary-700;
      }
    }
  }
  &.is-semi-transparent {
    .tab-link {
      @apply bg-slate-100 text-gray-700;
      &.is-active,
      &:hover {
        @apply bg-primary-300/40 text-primary-800;
      }
    }
  }
  &.is-rounded {
    .tabs-lists {
      @apply space-y-2 md:space-y-0 md:space-x-2 mb-1;
    }
    .tab-link {
      @apply bg-slate-100 text-gray-700 rounded-xl;
      &.is-active,
      &:hover {
        @apply bg-primary-300/40 text-primary-800;
      }
    }
  }
  &.clean-underline {
    .tabs-lists {
      @apply md:border-b-4 mb-0;
      .tab-link {
        @apply font-medium text-base bg-transparent transition-all ease-in-out duration-200 relative;
        &::after {
          @apply content-[''] h-1 w-full rounded-md -bottom-1 absolute left-0 right-0 bg-transparent transition-all ease-in-out duration-200;
        }
        &.is-active,
        &:hover {
          @apply text-primary-700;
          &::after {
            @apply bg-primary-700;
          }
        }
      }
    }
    .tabs-content {
      .tab-content {
        @apply bg-transparent p-5 rounded-none;
      }
    }
  }
  //&.is-transparent {
  //  .tab-link {
  //    @apply bg-transparent relative;
  //    &::after {
  //      @apply block content-[""] absolute bottom-0 left-0 right-0 h-1 rounded opacity-0 transition-all duration-300 ease-in-out;
  //    }
  //    &:hover {
  //      @apply text-primary-700;
  //    }
  //    &.is-active {
  //      @apply text-primary-700 bg-primary-300/10;
  //      &::after {
  //        @apply bg-primary-700 opacity-100;
  //      }
  //    }
  //  }
  //}
  .tabs-content {
    .tab-content {
      @apply p-6 bg-gray-100;
    }
  }
}

@media only screen and (max-width: 575px) {
  .tabs-wrapper {
    .tabs-lists {
      @apply overflow-auto;
    }
  }
}