@mixin lineNumberTheme($borderColor, $numberColor) {
  .code__content {
    border-left: 1px solid $borderColor;
  }

  .code__line,
  .code__bracket--last,
  .code__content > .code__bracket {
    &::before {
      color: $numberColor;
    }
  }
}

.code {
  padding: 1em;
  display: block;
  border-radius: 3px;
  position: relative;

  &--show-full--true {
    .icon {
      transform: rotate(180deg);
    }
  }

  &__content {
    margin-left: 1.5em;
    padding-left: 1.5em;

    > .code__bracket:first-of-type {
      margin-bottom: 0.5em;
      display: block;
    }
  }

  &__line,
  &__bracket--last,
  &__content > .code__bracket {
    counter-increment: line;

    &::before {
      content: counter(line);
      left: 0;
      position: absolute;
      text-align: right;
      width: 2em;
      user-select: none;
    }
  }

  &--condensed {
    .code {
      &.has-show-full-btn {
        max-height: 88px;
        overflow: hidden;
        border-radius: 3px 3px 0 0;
      }
    }

    .btn {
      transition: box-shadow 0.4s ease;
      border-radius: 0 0 3px 3px;
      position: relative;
      z-index: $zIndex-1;
    }

    &.code--show-full--true {
      .btn {
        box-shadow: none;
      }

      .code {
        max-height: none;
      }
    }
  }

  &__comma {
    margin-left: -0.5em; // Hack to move comma back. Not sure why this is necessary
  }

  &--light {
    @include lineNumberTheme(palette(gray, light), palette(gray, light));

    background: darken(palette(gray, xx-light), 2%);

    .code__val {
      color: palette(blue);
    }

    .code__colon {
      color: palette(red, salmon);
    }

    .code__key {
      color: palette(gray, x-dark);
    }

    &.code--show-full--false {
      .btn {
        box-shadow: 0 -10px 20px -5px rgba(black, 0.08);
      }
    }
  }

  &--dark {
    @include lineNumberTheme(darken(palette(blue, xx-dark), 10%), palette(gray, dark));

    background: darken(palette(blue, xx-dark), 5%);
    color: white;

    .code__val {
      color: palette(blue, light);
    }

    .code__key {
      font-weight: font-weight(regular);
    }

    .code__colon {
      color: palette(red, salmon);
    }

    &.code--show-full--false {
      .btn {
        box-shadow: 0 -10px 20px -5px rgba(black, 0.5);
      }
    }
  }

  &__line {
    margin-bottom: 0.5em;
    margin-left: 1em;

    .code__line {
      margin-top: 0.5em;
    }
  }

  &__key {
    font-weight: font-weight(heavy);
  }
}