.nu-tabs-wrapper {
  height: 36px;
  overflow: hidden;
  position: relative;
}

.nu-tabs-wrapper .nu-tab-selector {
  top: 0;
  height: 36px;
  user-select: none;
  border-radius: 4px;
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  transition: all 200ms ease-in-out;
  box-shadow: var(--box-shadow-inset);
}

.nu-tabs-wrapper--rounded .nu-tab-selector {
  border-radius: 18px;
}

.nu-tabs-wrapper--outlined .nu-tab-selector {
  box-shadow: none !important;
  border: 1px solid var(--selector-bg);
}

.nu-tabs-wrapper--underlined .nu-tab-selector {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0px;
  box-shadow: none !important;
  border-bottom: 2px solid var(--selector-bg);
}

.nu-tab-items-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  transition: all 200ms ease-in-out;
}

.nu-tab-items-container {
  height: inherit;
  overflow: inherit;
  position: relative;
}

.nu-tab-item {
  width: 100%;
  padding-top: 12px;
}

.nu-tab.nu-tab--light,
.nu-tabs-wrapper.nu-tabs-wrapper--light,
.nu-tab-items-wrapper.nu-tab-items-wrapper--light {
  --selector-bg: var(--primary);
  --box-shadow: 3px 3px 6px var(--light-bg-dark-shadow),
    -3px -3px 6px var(--light-bg-light-shadow);
  --box-shadow-inset: inset -2px -2px 5px var(--light-bg-light-shadow),
    inset 2px 2px 5px var(--light-bg-dark-shadow);
}

.nu-tab.nu-tab--dark,
.nu-tabs-wrapper.nu-tabs-wrapper--dark,
.nu-tab-items-wrapper.nu-tab-items-wrapper--dark {
  --selector-bg: var(--primary);
  --box-shadow: 3px 3px 6px var(--dark-bg-dark-shadow),
    -3px -3px 6px var(--dark-bg-light-shadow);
  --box-shadow-inset: inset -2px -2px 5px var(--dark-bg-light-shadow),
    inset 2px 2px 5px var(--dark-bg-dark-shadow);
}
