// Renamed because "tabs" has a dependency on jQuery
// Copy from cms/css/main.less:350

.v2tabs > ul {
  position: relative;
  z-index: 8;

  overflow: hidden;

  height: 37px;
  margin: 0;
  padding: 3px 0 0;

  list-style: none;

  border-bottom: 1px solid rgb(var(--border--neutral-medium-default--light));
}

.v2tabs > ul.dropdown-ready {
  overflow: visible;
}

.v2tabs > ul::after {
  content: '';
  clear: both;
  display: table;
}

.v2tabs > ul > li {
  position: relative;
  float: left;
  margin-right: -1px;
  white-space: nowrap;
}

.v2tabs > ul > li.active {
  z-index: 2;
}

.v2tabs > ul > li > a,
.v2tabs > ul > li > button {
  display: block;

  height: 33px;
  padding: 8px 18px 0;

  font-size: 0.75rem;
  color: rgb(var(--foreground--neutral-full-default--light));
  text-decoration: none;
  white-space: nowrap;

  background-color: rgb(var(--background--neutral-low-default--light));
  border: 1px solid rgb(var(--border--neutral-medium-default--light));
  border-bottom: none;
}

.v2tabs > ul > li.v2tabs__tab--overflowed {
  position: absolute;
  visibility: hidden;
}

.v2tabs > ul > li:not(.active, .ui-tabs-active) > a:hover {
  color: rgb(var(--foreground--neutral-full-hovered--light));
  background-color: rgb(var(--background--neutral-low-hovered--light));
}

.v2tabs > ul > li.element-admin-only a {
  font-style: italic;
  color: rgb(var(--foreground--superadmin-high-default--light));
}

.v2tabs > ul > li.element-admin-only:not(.active, .ui-tabs-active) a:hover {
  color: rgb(var(--foreground--superadmin-high-hovered--light));
}

.v2tabs > ul > li.active::before,
.v2tabs > ul > li.ui-tabs-active::before {
  content: '';

  position: absolute;
  top: -3px;
  left: 0;

  width: 100%;
  height: 4px;

  background: rgb(var(--background--main-medium-selected--light));
}

.v2tabs > ul .ui-tabs-validation-error::before {
  content: '';

  position: absolute;
  top: -3px;
  left: 0;

  width: 100%;
  height: 4px;

  background: rgb(var(--background--critical-high-default--light));
}

.v2tabs > ul .ui-tabs-validation-error.ui-tabs-active::before {
  background: rgb(var(--background--critical-high-default--light));
}

.v2tabs > ul .ui-tabs-validation-error a::after {
  content: ' !';
  font-weight: 900;
  color: rgb(var(--foreground--critical-high-default--light));
}

.v2tabs > ul > li.active > a,
.v2tabs > ul > li.active > button,
.v2tabs > ul > li.ui-tabs-active > a,
.v2tabs > ul > li.ui-tabs-active > button {
  height: 34px;
  background-color: rgb(var(--background--neutral-base-default--light));
}

.v2tabs > .ui-tabs-panel {
  position: relative;
  display: block;
  min-height: 252px;
  padding: 18px 0 0;
}

/*
 * Show cursor pointer for non-active tabs even the <a> does not contain the [href] attribute.
 *
 * Note:
 * The pointer cursor is inherited if the tab link has an [href] attribute, regardless of whether the tab is selected or not
 */
.v2tabs ul li:not(.active) > a {
  cursor: pointer;
}

.ui-tabs-panel--hidden {
  display: none;
}

.v2tabs__dropdownList {
  position: absolute;
  z-index: 10;
  top: 33px;
  right: 0;

  display: block;

  max-height: 252px; /* [future] why hard-coded value? */
  margin: 0;
  margin-top: -3px;
  padding: 0;

  list-style-type: none;

  border: 1px solid rgb(var(--border--neutral-low-default--light));
  box-shadow: var(--shadow--medium-soft--light);
}

.v2tabs__dropdownListItem {
  & > a {
    position: relative;

    display: block;

    padding: 0.75rem 18px;

    font-size: 0.75rem;
    line-height: 1.25;
    color: rgb(var(--foreground--neutral-full-default--light));

    background-color: rgb(var(--background--neutral-base-default--light));
    border-bottom: 1px solid rgb(var(--border--neutral-low-default--light));
  }

  & > a:hover {
    text-decoration: none;
    background: rgb(var(--background--neutral-low-hovered--light));
  }

  &--active {
    & > a {
      top: 0;

      margin-top: 0;
      margin-right: 0;

      color: rgb(var(--foreground--neutral-full-default--dark));

      background-color: rgb(var(--background--controls-medium-selected--light));
      border-right-style: none;
    }

    & > a:hover {
      background-color: rgb(var(--background--controls-medium-hovered--light));
    }
  }

  &--last {
    border-bottom: none;
  }
}