@layer gfm {
  .divided-panes {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  @media (min-width: 1280px) {
    .divided-panes {
      display: grid;
      grid-template-columns: 45% 55%;

      width: 100%;
      height: 100vh;
    }
  }


  .input-pane {
    width: 100%;
    background: var(--gfm-editor-bg);
    textarea {
      width: 100%;
      height: 22.5rem;
      resize: none;
      outline: none;
      border: none;
      padding: 0 0.25rem;
      background: transparent;
    }

    @media (min-width: 1280px) {
      textarea {
        /* why do we need to remove 4 extra pixels? who knows */
        height: calc(100vh - 54px);
      }
    }

    .actions {
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 0 10px;
      button {
        border-radius: 0.4rem;
        border: 2px solid;
        border-color: var(--page-link-border);
        background: var(--page-link-bg);
        color: var(--page-link-title-fg);
        padding: 0 0.3rem 0.2rem 0.3rem;
        &:hover {
          background: var(--page-link-bg-hover);
          color: var(--page-link-title-fg-hover);
          border-color: var(--page-link-border-hover);
        }
      }
    }
  }
  .output-pane {
    width: 100%;
    overflow: scroll;
  }
}