.editor {
  display: flex;
  margin-bottom: .75rem;

  mark {
    background-color: palette(orange, a-light);
    color: transparent;
    transition: background-color $transition;
  }
  .dark & mark {
    background-color: palette(blue, a-light);
  }

  &__textarea {
    z-index: 1;
    -webkit-appearance: none;
  }

  &__textarea, &__ghost,  &__placeholder {
    border: {
      top: 1px solid;
      bottom: 1px solid;
      right: 0;
      left: 0;
    }
    flex: 1;
    font: {
      size: .95rem;
      family: $sans-serif;
    }
    height: 15.5rem;
    padding: {
      bottom: 1rem;
      left: 0;
      right: 0;
      top: 1rem;
    }
  }

  &__textarea, &__placeholder {
    border-color: palette(gray, light);
  }
  .dark &__textarea, .dark &__placeholder {
    border-color: palette(dark, light);
  }

  &__textarea {
    background-color: transparent;
    border-radius: 0;
    color: palette(black);
    margin: 0;
    outline: 0;
    resize: none;
    transition: border-color $transition, color $transition;

    &:focus {
      border-color: palette(orange);
    }

    &::placeholder {
      color: palette(gray);  
    }
  }
  .dark &__textarea, &__placeholder {
    color: palette(white);
    
    &:focus {
      border-color: palette(blue);
    }

    &::placeholder {
      color: palette(dark, x-light);  
    }
  }

  &__ghost {
    width: calc(100% - 2rem);
    max-width: 35rem;
    background-color: transparent;
    border-color: transparent;
    color: transparent;
    position: absolute;
    pointer-events: none;

    .highlights {
      height: 100%;
      overflow: hidden;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }

  &__placeholder {
    align-items: center;
    color: palette(gray, dark);
    display: flex;
    justify-content: center;
    transition: border-color $transition, color $transition;
  }
  .dark &__placeholder {
    color: palette(dark, x-light);
  }
}
