form {
  .cms-content-fields {
    .nav-tabs.ui-widget-header {
      .nav-item {
        padding: 10px 5px 10px 0 !important;
        margin-left: 0;
        margin-right: 5px;

        .nav-link {
          padding: 0 !important;
          border-width: 0;

          &.active {
            font-weight: bold;
          }
        }
      }
    }

    .tab-content {
      .nav-tabs.ui-widget-header {
        .nav-link {
          padding: 5px 15px !important;
          border-radius: 5px;
          // background-color: var(--light);
          transition:
            color .3s ease,
            background-color .3s ease;

          &.active {
            font-weight: 400;
            color: var(--cms-text-colour);
            // background-color: var(--dark);
          }
        }
      }
    }
  }
}

.nav-tabs {
  border-color: var(--cms-border-colour) !important;
}

.nav-link,
.ui-tabs-anchor {
  color: var(--cms-text-colour) !important;
}

// .ui-tabs-nav {
//   &.cms-tabset-nav-primary {
//     .nav-item {
//       .nav-link {
//         &:hover {
//           border-color: var(--cms-border-colour) !important;
//         }
//       }

//       &.ui-state-active {
//         .nav-link {
//           &,
//           &:hover {
//             border-color: var(--cms-text-colour) !important;
//           }
//         }
//       }
//     }
//   }
// }

.nav-tabs {
  .nav-item {
    .nav-link {
      &:hover {
        border-color: var(--cms-border-colour) !important;
      }
      &.active {
        &,
        &:hover {
          border-color: var(--cms-text-colour) !important;
        }
      }
    }
  }
}

.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-default .nav-link:hover,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-default .ui-tabs-anchor:hover,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-default .nav-link:hover,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-default .ui-tabs-anchor:hover,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-default .nav-link:hover,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-default .ui-tabs-anchor:hover {
  border-color: var(--cms-border-colour) !important;
}

.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active .nav-link,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active .nav-link:hover,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active a,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active .nav-link,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active .nav-link:hover,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active a,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active .nav-link,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active .nav-link:hover,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active a {
  border-color: var(--cms-text-colour) !important;
}