* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --label-height: 40px;
}

html,
body {
  height: 100%;
  width: 100%;
  display: flex;
}

#container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

#editors {
  flex-grow: 1;
  display: flex;
  height: 50%;
  width: 100%;
  resize: vertical;

  .editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    overflow: hidden;

    label {
      height: var(--label-height);
      background-color: #eee;
      border: 1px solid #999;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      font-family: sans-serif;
      user-select: none;
      flex-grow: 0;
      white-space: nowrap;

      select {
        width: 19px;
        margin-left: 0.5rem;
        cursor: pointer;
      }
    }

    .code-editor {
      flex-grow: 1;
    }
  }
}

#result {
  flex-grow: 1;
  height: 50%;
  width: 100%;
  display: flex;

  iframe {
    height: 100%;
    width: 100%;
    border: 0;
  }
}

@media screen and (max-width: 768px) {
  #editors .editor:not(.active) {
    flex: unset;
    width: var(--label-height);

    label {
      transform: rotateZ(90deg) scaleY(-1) scaleX(-1) translateY(50%)
        translateX(calc(-100% + (var(--label-height) / 2)));
      transform-origin: left;
      width: calc(50vh - 2px);

      select {
        display: none;
      }
    }

    .code-editor {
      display: none;
    }
  }
}

/* CodeMirror */
.cm-editor {
  height: calc(50vh - var(--label-height));
}