@import '~codemirror/lib/codemirror.css';
@import '~codemirror/theme/neo.css';

@mixin CodeTabs {
  $bgc-pre: #f6f8fa;
  $bgc-pre-dark: #242e34;
  $bgc-bar: darken(desaturate($bgc-pre, 17.46), 4.31);
  $bgc-bar-dark: lighten(desaturate($bgc-pre-dark, 17.46), 4.31);
  $radius: var(--md-code-radius, var(--markdown-radius, 3px));

  color: #333;
  color: var(--md-code-text, #333);
  border-radius: $radius !important;
  overflow: hidden;

  &.theme-dark {
    color: white;
    color: var(--md-code-text, white);
    .CodeTabs-toolbar {
      background: $bgc-bar-dark;
      background: var(--md-code-tabs, $bgc-bar-dark);
    }
  }

  &-toolbar {
    background: $bgc-bar;
    background: var(--md-code-tabs, $bgc-bar);
    display: flex;
    flex-flow: row nowrap;
    overflow: hidden;
    overflow-x: auto;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }
    button {
      white-space: nowrap;
      transition: 0.123s ease;
      -webkit-appearance: none;
      appearance: none;
      display: inline-block;
      line-height: 2;
      padding: 0.5em 1em;
      border: none;
      background: transparent;
      outline: none;
      color: inherit;
      font: inherit;
      font-size: 0.75em;
      cursor: pointer;

      &:focus-visible {
        outline: 3px solid var(--color-focus-ring);
        outline-offset: -3px;
      }
    }
  }

  &.CodeTabs_initial &-toolbar button:first-child,
  &-toolbar button.CodeTabs_active {
    background: $bgc-pre;
    background: var(--md-code-background, $bgc-pre);
    color: black;
    color: var(--md-code-text, black);
    pointer-events: none;
  }

  &.theme-dark.CodeTabs_initial &-toolbar button:first-child,
  &.theme-dark .CodeTabs-toolbar button.CodeTabs_active {
    background: $bgc-pre-dark;
    background: var(--md-code-background, $bgc-pre-dark);
    color: white;
    color: var(--md-code-text, white);
  }

  &-toolbar button:not(.CodeTabs_active):hover,
  &-toolbar button:not(.CodeTabs_active):focus {
    background: rgba(0, 0, 0, 0.075);
  }

  pre {
    border-radius: 0 0 $radius $radius !important;
    background: $bgc-pre;
    background: var(--md-code-background, $bgc-pre);
    margin-bottom: 0;
    &:not(.CodeTabs_active) {
      display: none;
    }
  }

  &.theme-dark pre {
    background: $bgc-pre-dark;
    background: var(--md-code-background, $bgc-pre-dark);
  }

  &.CodeTabs_initial pre:first-child {
    display: block;
  }
}

.CodeTabs {
  @include CodeTabs;
}