@import '~styles/markdown-styles-mixin.less';

.MarkdownEditor {
  .react-mde .grip {
    display: none;
  }

  .mde-header {
    position: relative;
  }

  .mde-tabs {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    button {
      opacity: 0.5;

      &:hover {
        opacity: 0.8;
      }
    }

    .selected {
      display: none;
    }
  }

  .mde-preview .mde-preview-content {
    font-size: 1.1rem;
    .markdown-styles-mixin();
  }

  &.is-reduced {
    .mde-preview .mde-preview-content {
      font-size: 0.9rem;
    }

    .react-mde,
    .mde-header {
      border-color: rgba(0, 0, 0, 0.12);
    }

    .mde-header {
      font-size: 0.8rem;
      background: none;

      .mde-header-item {
        margin: 0 0.15rem;
      }

      ul.mde-header-group {
        padding: 0.25rem 0.1rem;
        margin-right: 0.75rem;
      }
    }
  }
}