code-tabs.scss

@use "vuepress-shared/styles/reset";

.code-tabs-nav {
  overflow-x: auto;

  margin: 0.85rem 0 -0.85rem;
  padding: 0;
  border-radius: 6px 6px 0 0;

  background: var(--code-tabs-nav-bg-color, #3a404c);
  list-style: none;

  white-space: nowrap;

  transition: background var(--t-color, 0.3s ease);

  @media (max-width: hope-config.$mobile) {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    border-radius: 0;
  }
}

.code-tabs-nav-tab {
  @include reset.button;

  position: relative;

  min-width: 3rem;
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px 6px 0 0;

  background: transparent;
  color: var(--code-tabs-nav-text-color, #eee);

  font-weight: 600;
  font-size: 0.85em;
  line-height: 1.4;

  cursor: pointer;

  transition: background var(--t-color, 0.3s ease),
    color var(--t-color, 0.3s ease);

  &:hover {
    background: var(--code-tabs-nav-hover-color, #434a57);
  }

  &::before,
  &::after {
    content: " ";

    position: absolute;
    bottom: 0;
    z-index: 1;

    width: 6px;
    height: 6px;
  }

  &::before {
    right: 100%;
  }

  &::after {
    left: 100%;
  }

  &.active {
    background: var(--code-bg-color, #282c34);

    &::before {
      background: radial-gradient(
        12px at left top,
        transparent 50%,
        var(--code-bg-color, #282c34) 50%
      );
    }

    &::after {
      background: radial-gradient(
        12px at right top,
        transparent 50%,
        var(--code-bg-color, #282c34) 50%
      );
    }
  }

  &:first-child {
    &::before {
      display: none;
    }
  }
}

.code-tab {
  display: none;

  &.active {
    display: block;
  }

  div[class*="language-"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    @media (max-width: hope-config.$mobile) {
      margin: 0.85rem -1.5rem;
    }

    code {
      @media print {
        white-space: pre-wrap;
      }
    }
  }
}