.onedd-tabs {
  position: relative;

  border-radius: 20px;
  box-shadow: 0 4px 49px 0 rgba(0, 0, 0, 0.09);
  margin-bottom: 32px;
}

.onedd-tabs__content {
  padding: 2rem 0 0;
  @media screen and (max-width: 600px) {
    padding: 1rem 0 0;
  }
}

.onedd-tabs__nav {
  display: flex;
  flex-direction: row;
  list-style: none;
  position: relative;
  scrollbar-width: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 9999px;
  background-color: color-mix(
    in oklab,
    var(--color-black, #000) 5%,
    transparent
  );
  padding: 6px;
  width: fit-content;
  max-width: 100%;
  height: 56px;
}

.onedd-tabs__nav::-webkit-scrollbar {
  display: none;
}

.onedd-tabs__nav-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Editor: Remove button */
.onedd-tabs__nav-item .btn-remove {
  position: absolute;
  top: 0px;
  right: -4px;
  z-index: 100;
  height: auto !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid;
  border-radius: 9999px;
}

@media (min-width: 1200px) {
  .onedd-tabs__nav-item .btn-remove {
    opacity: 0;
  }
}

.onedd-tabs__nav-item .btn-remove .dashicon {
  width: 15px;
  height: 15px;
}

.onedd-tabs__nav-item:hover .btn-remove {
  opacity: 1;
}

/* Editor: Add button */
.btn-add {
  position: absolute;
  top: -12px;
  right: 0;
  z-index: 10;
}

/* Tab link */
.onedd-tabs__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  border-radius: 9999px;
  white-space: nowrap !important;
  cursor: pointer;
  height: 100%;
}

/* Tab pane */
.onedd-tabs__pane {
  display: none;
}

.onedd-tabs__pane.active {
  display: block;
}

/* Navigation buttons */
.onedd-tabs__btn-left,
.onedd-tabs__btn-right {
  position: absolute;
  top: 24px;
  min-width: 36px;
  height: 56px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e9e9e9;
  opacity: 0;
  transition: opacity 0.2s ease;
  border: none;
  pointer-events: none;

  @media screen and (max-width: 1023.98px) {
    top: 16px;
  }
}

.onedd-tabs__btn-left {
  left: 22px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 9999px 0 0 9999px;

  @media screen and (max-width: 1023.98px) {
    left: 16px;
  }
}

.onedd-tabs__btn-right {
  right: 22px;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0 9999px 9999px 0;

  @media screen and (max-width: 1023.98px) {
    right: 16px;
  }
}

.onedd-tabs__btn-left.shadow--visible,
.onedd-tabs__btn-right.shadow--visible {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

.onedd-tabs__btn-left svg,
.onedd-tabs__btn-right svg {
  width: 10px;
  height: 18px;
}

@media (max-width: 768px) {
  .onedd-tabs__nav {
    max-width: calc(100vw - 100px);
  }
}