// .tabs {
//   &.ac-tabs {
//     ul {
//       border-bottom-color: $color-border;
//     }

//     &.is-line {
//       ul {
//         border-bottom-color: $color-border;
//         padding-left: 4px;

//         li {
//           &.is-active {
//             a {
//               font-weight: 500;
//               border-bottom-color: $ac-primary;
//               border-bottom: 2px solid $ac-primary !important;
//               border-width: 2px;
//             }
//           }

//           a {
//             // text-transform: uppercase;
//             font-weight: 400;
//             color: $color-heading;
//             font-size: 1rem;
//             border-bottom: none;
//             padding: 6px 16px;

//             &:hover {
//               border-bottom-color: $ac-primary;
//             }
//           }
//         }
//       }
//     }

//     &.is-boxed {
//       font-size: 1rem;

//       a {
//         padding: 8px 20px;
//         color: $color-text;

//         &:hover {
//           border-bottom-color: transparent;
//           background-color: transparent;
//         }
//       }

//       ul {
//         padding-left: 10px;

//         li {
//           &.is-active {
//             position: relative;
//             border-color: $color-border;
//             z-index: 1;
//             color: $ac-primary;

//             &:after {
//               position: absolute;
//               content: "";
//               left: 0;
//               top: 0;
//               width: 100%;
//               height: 4px;
//               border-radius: 4px 4px 0 0;
//               background-color: $ac-primary;
//             }

//             a {
//               border-color: $color-border;
//               background-color: $white-100;
//               padding: 8px 20px;
//               font-weight: 500;
//               margin-bottom: -2px;
//               font-size: 1rem;
//             }
//           }
//         }
//       }

//       &.is-gap {
//         ul {
//           li {
//             margin-right: 6px;

//             &.is-active {
//               box-shadow: 0px 4px 6px rgba(133, 145, 163, 0.54);
//             }

//             a {
//               border: 1px solid $color-border;
//               border-bottom: none;
//               margin-bottom: -2px;
//               font-size: 1rem;
//               color: $color-text;
//             }
//           }
//         }

//         &.is-borderless {
//           ul {
//             border-bottom-color: transparent;

//             li {
//               &.is-active {
//                 a {
//                   background-color: $color-border;
//                 }
//               }

//               a {
//                 border: 1px solid transparent;
//               }
//             }
//           }
//         }
//       }
//     }

//     &.is-toggle {
//       ul {
//         border: 1px solid $primary-10;
//         border-radius: 4px;
//         padding: 4px;
//         flex-grow: inherit;

//         li {
//           &.is-active {
//             a {
//               color: $white-100;
//               background-color: $ac-primary;

//               &:hover {
//                 background-color: $ac-primary;
//               }
//             }
//           }

//           a {
//             font-size: 16px;
//             font-weight: 500;
//             border: none;
//             padding: 8px 25px;
//             line-height: 1;
//             border-radius: 4px;

//             &:hover {
//               background-color: inherit;
//             }
//           }
//         }
//       }
//     }

//     &.kubedb-ui-tabs {
//       ul {
//         border-bottom: none;

//         li {
//           &.is-active {
//             a {
//               border-bottom: 3px solid $ac-primary !important;
//             }
//           }
//         }
//       }
//     }
//   }
// }

// .ac-tabs-body {
//   &.is-content-available {
//     .ac-tabs {
//       margin-bottom: 0;

//       ul {
//         li {
//           &.is-active {
//             a {
//               border-color: $color-border;
//               background-color: $white-100;
//               color: $ac-primary;
//             }
//           }
//         }
//       }
//     }

//     .ac-tab-content {
//       background-color: $white-100;
//       border: 1px solid $color-border;
//       border-top: none;
//       border-radius: 0 0 4px 4px;

//       &.is-borderless {
//         border: 1px solid transparent;
//         background-color: $color-border;
//         border-radius: 4px 4px 4px 4px;
//       }
//     }
//   }
// }

// .ac-tabs-body {
//   &.is-content-available {
//     &.has-bg-color {
//       .ac-tabs {
//         ul {
//           border-bottom-width: 0px;

//           li {
//             &.is-active {
//               a {
//                 background-color: $color-border;
//                 color: $ac-primary;
//               }
//             }
//           }
//         }
//       }
//     }
//   }
// }

// .tabs li.is-active a {
//   color: $ac-primary;
// }

// .no-data-available {
//   img {
//     width: 250px;
//   }
// }

// .ac-system-body.bb-user-management {
//   .tabs.ac-tabs.is-line {
//     margin-left: -20px;
//     position: sticky;
//     top: 50px;
//     z-index: 99;
//     background: $white-100;
//   }
// }

// // dark theme
// // .is-dark-theme {
// //   .tabs {
// //     &.is-toggle {
// //       a {
// //         &:hover {
// //           background-color: $dark-bg;
// //         }
// //       }
// //     }

// //     a {
// //       border-bottom: 1px solid $color-border;
// //       color: $white-100;
// //     }

// //     &.ac-tabs.is-line {
// //       ul {
// //         li.is-active {
// //           a {
// //             color: $color-heading;
// //           }
// //         }
// //       }
// //     }
// //   }
// // }

// /****************************************
// Responsive Classes
// *****************************************/
// // Extra small devices (portrait phones, less than 576px)
// @media (max-width: 575.98px) {
// }

// // Small devices (landscape phones, 576px and up)
// @media (min-width: 576px) and (max-width: 767.98px) {
// }

// // Medium devices (tablets, 768px and up)
// @media (min-width: 768px) and (max-width: 991.98px) {
// }

// // Large devices (desktops, 992px and up)
// @media (min-width: 992px) and (max-width: 1199.98px) {
// }

// // Extra large devices (large desktops, 1200px and up)
// @media (min-width: 1200px) {
//   .card-body-wrapper {
//     .tabs.ac-tabs {
//       &.is-boxed {
//         ul {
//           li {
//             &.is-active {
//               a {
//                 border-color: $color-border;
//                 background-color: $white-100;
//               }
//             }
//           }
//         }
//       }
//     }
//   }
// }

.tabs {
  &.ac-tabs {
    ul {
      border-color: $color-border;
    }
    a {
      padding: 8px 20px;
      color: $color-heading;
      font-weight: 500;
      color: $gray-40;
      &:hover {
        border-bottom-color: $gray-40;
      }
    }
    li {
      &.is-active {
        a {
          border-bottom-color: $ac-primary;
          color: $ac-primary;
          border-bottom-width: 2px;
        }
      }
    }
  }
}