.rp-tabs {
  contain: content;
  border-radius: var(--rp-radius);
  margin: 1rem 0;
  border: var(--rp-code-block-border);
  box-shadow: var(--rp-code-block-shadow);

  .rp-codeblock__title {
    padding: 8px 12px;
  }

  &__label {
    padding: 4px 12px;
    display: flex;
    min-width: 100%;
    flex-wrap: wrap;
    background-color: var(--rp-code-title-bg);
    border-bottom: var(--rp-code-block-border);

    &--no-scrollbar {
      &::-webkit-scrollbar {
        display: none;
      }
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &__item {
      word-break: keep-all;
      font-size: 0.875rem;

      position: relative;
      color: var(--rp-c-text-2);

      box-sizing: border-box;
      margin-right: 4px;
      padding: 4px 12px;
      user-select: none;
      transition:
        color 0.2s ease-out,
        background-color 0.2s ease-out;
      cursor: pointer;

      border-radius: calc(1.5 * var(--rp-radius-small));

      &:last-child {
        margin-right: 0;
      }

      &--not-selected {
        &:hover {
          background-color: var(--rp-c-bg-mute);
        }
      }

      &--selected {
        color: var(--rp-c-text-0);
        background-color: var(--rp-c-bg);
        box-shadow: 0px 0px 3px 0px var(--rp-c-divider);
      }
    }
  }

  &__content {
    &__item {
      padding: 0 1rem;

      // nested rp-tabs and codeblock
      & > .rp-codeblock:only-child,
      & > .rp-tabs:only-child {
        margin: 0 -1rem;
        border-radius: 0;
        border: none;
        box-shadow: none;
      }

      &--active {
        display: block;
      }
      &--hidden {
        display: none;
      }
    }
  }
}

.dark {
  .rp-tabs__label__item--selected {
    background-color: var(--rp-c-bg-soft);
  }
}