@import "vars";

.lore-editor {
  display: flex;
  flex-direction: column;

  .title > input {
    background-color: var(--color-background-light);
    color: var(--color-foreground);
    border: none;
    font-size: 1.4em;
    padding: 0.3em;
    width: 100%;
  }

  .bar {
    border-bottom: 1px solid var(--color-accent);
    display: flex;
    flex-wrap: wrap;
    margin-left: -1px;
    padding-bottom: 0.3em;
    padding-top: 0.3em;

    .group {
      padding: 0.2em;
      grid-row-gap: 0.3em;
      display: inline-flex;
      border-collapse: collapse;
      border-left: 1px solid var(--color-accent);

      span {
        border-radius: 0.2em;
        padding: 0.3em;
        cursor: pointer;

        &:hover, &.active {
          color: var(--color-accent-alt);
        }
      }
    }
  }

  .container {
    padding: 1em;
    background: var(--color-background-light);
    overflow: auto;
    flex-grow: 2;

    .DraftEditor-root {
      height: 100%;

      div[data-contents=true] {
        & > *:first-child {
          margin-top: 0;
        }

        h1, h2, h3, h4, h5 {
          & > div:before {
            content: "» ";
            display: inline;
          }
        }

        pre {
          background-color: lighten($background-light, 30%);
          font-size: 1.1em;
          padding: 1em;
        }

        pre > pre {
          padding: 0;
          margin: 0;
        }

        blockquote {
          border-left: 3px solid lighten($background-light, 30%);
          padding-left: 0.5em;
        }
      }
    }
  }
}