@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content
  }
  @-moz-keyframes #{$animationName} {
    @content
  }
  @-o-keyframes #{$animationName} {
    @content
  }
  @keyframes #{$animationName} {
    @content
  }
}

@mixin unique-keyframes {
  $animationName: unique-id();
  animation-name: $animationName;
  @include keyframes($animationName) {
    @content
  }
}

[data-component=playground-code-editor-editor] {
  position: relative;
  height: 0;

  .monaco-editor-light {
    height: 100%;
    overflow: hidden;
    background-color: var(--border);

    .jsx-tag-angle-bracket {
      color: #800000;
    }

    .jsx-text {
      color: #000;
    }

    .jsx-tag-name {
      color: #800000;
    }

    .jsx-tag-attribute-key {
      color: #f00;
    }
  }

  .monaco-editor-vs-dark {
    height: 100%;
    overflow: hidden;
    background-color: var(--border);

    .jsx-tag-angle-bracket {
      color: #808080;
    }

    .jsx-text {
      color: #d4d4d4;
    }

    .jsx-tag-name {
      color: #569cd6;
    }

    .jsx-tag-attribute-key {
      color: #9cdcfe;
    }
  }

  .playground-code-editor-loading {
    position: absolute;
    top: 0;
    right: 0;
    margin: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: {
      top: 2px #666 solid;
      bottom: 2px #ddd solid;
      left: 2px #ddd solid;
      right: 2px #ddd solid;
    };
    animation: .6s linear infinite;

    @include unique-keyframes {
      0% {
        transform: rotateZ(0);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }
  }
}