/*
 * Symphony - A modern community (forum/SNS/blog) platform written in Java.
 * Copyright (C) 2012-2017,  b3log.org & hacpai.com
 *
 * 本文件属于 Sym 商业版的一部分，请仔细阅读项目根文件夹的 LICENSE 并严格遵守相关约定
 */
/**
 * editor
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</ta>
 * @version 0.1.1.2, Jan 10, 2018
 */

.b3log-editor {
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column;

  &--fullscreen {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    height: 100% !important;
    z-index: 90;
  }

  &__toolbar {
    line-height: 34px;
    display: flex;
    border-bottom: 1px solid rgba(128,128,128,0.06);

    &::-webkit-scrollbar {
      display: none;
    }

    & > span,
    & > a {
      text-align: center;
      display: inline-block;
      cursor: pointer;
      border-bottom: 0;

      svg {
        color: $black-light;
        float: left;
        margin: 10px 8px;
      }

      &:hover,
      &.b3log-editor__icon--current {
        svg {
          color: $blue;
        }
      }
    }

    label {
      overflow: hidden;
      position: relative;
      height: 34px;
      width: 30px;
      display: block;

      input {
        position: absolute;
        width: 1px;
        opacity: 0.001;
        height: 16px;
        overflow: hidden;
      }
    }
  }

  &__content {
    display: flex;
    min-height: 60px;
    flex: 1;

  }

  &__textarea,
  &__markdown {
    flex: 1
  }

  &__markdown {
    overflow: auto;
    padding: 10px;
    background-color: #f6f6f6;
    box-shadow: inset 1px 0 rgba(128, 128, 128, 0.06);
  }

  &__textarea {
    background-color: #fcfcfc;
    textarea {
      border: 0;
      resize: none;
      width: 100%;
      box-sizing: border-box;
      outline: 0 none;
      font-size: 15px;
      padding: 10px;
      height: 100%;
      font-family: Courier, Menlo, "Helvetica Neue", "Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
      line-height: 18px;
      color: #3b3e43;

      &::placeholder {
        font-family: "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif
      }
    }
  }

  &__hints {
    background-color: #fff;
    line-height: 21px;
    position: absolute;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 3px;
    padding: 5px 0;
    z-index: 1;

    li {
      list-style: none;
      padding: 0 10px;
      border-bottom: 1px solid #eee;
      display: block;
      text-shadow: 0 1px 0 #fff;
      color: #616161;
      line-height: 30px;
      cursor: pointer;

      &:hover,
      &.b3log-editor__hints--current{
        background-color: #4285f4;
        color: #fff;
        text-shadow: none;
      }

      &:last-child {
        border-bottom: 0;
      }
    }

    img {
      height: 20px;
      width: 20px;
      float: left;
      margin: 5px 5px 0 0;
      cursor: pointer;
    }
  }

  &__emoji {
    display: none;
    padding: 5px 0 5px 5px;
    top: 28px;
    left: 5px;
    max-width: 300px;
    background-color: #fff;
    line-height: 21px;
    position: absolute;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 3px;

    span {
      cursor: pointer;
      margin: 0 5px 5px 0;
    }

    &-tip {
      text-align: right;
      padding: 0 5px 0 0;
    }
  }
}



