// Module: CompositionInput
.module-composition-input {
  &__quill {
    height: 100%;
    padding: 0;

    .ql-editor {
      caret-color: transparent;
      padding: 0;
      text-align: start;
      line-height: 18px;

      &--loaded {
        caret-color: auto;
      }

      &.ql-blank::before {
        left: 0;
        right: 0;
        font-style: normal;
      }

      .emoji-blot {
        width: 20px;
        height: 20px;
        vertical-align: text-bottom;
      }

      .image-blot {
        max-height: 100px;
        vertical-align: text-bottom;
      }

      .video-blot {
        display: inline-block;
        // width: 230px;
        height: 64px;
        line-height: 64px;
        font-size: 64px;
        border-radius: 4px;
        overflow: hidden;
        vertical-align: text-bottom;

        @include light-theme {
          background-color: $color-gray-02;
        }

        @include dark-theme {
          background-color: $color-gray-65;
        }

        &-content {
          width: 230px;
          height: 64px;
          font-size: 14px;
          line-height: normal;
          @include flex($align: center);
          transform: translateY(-19px);
          

          @include light-theme {
            color: $color-gray-75;
          }
  
          @include dark-theme {
            color: $color-gray-15;
          }

          &-name {
            max-width: 158px;
            overflow: hidden;
            display: -webkit-inline-box;
            word-break: break-all;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          &-size {
            font-size: 12px;

            @include light-theme {
              color: $color-gray-45;
            }
    
            @include dark-theme {
              color: $color-gray-25;
            }
          }
        }
      }
    }
  }

  &__at-mention {
    background-color: $color-gray-20;
    border-radius: 4px;
    display: inline;
    padding-left: 4px;
    padding-right: 4px;
    height: 22px;
    line-height: 22px;

    @include dark-theme {
      background-color: $color-gray-60;
    }
  }

  &__input {
    flex: 1;
    width: 100%;
    word-break: break-word;
    overflow: hidden;

    // Override Quill styles
    .ql-container {
      @include font-body-2;
    }

    .ql-blank::before {
      color: $color-gray-45;
    }

    @include light-theme() {
      color: $color-gray-60;
    }

    @include dark-theme() {
      color: $color-gray-25;
    }

    &__scroller {
      height: 100%;
      overflow: auto;
    }
  }

  &__suggestions {
    padding: 0;
    border-radius: 8px;
    z-index: 2;
    overflow: hidden;

    &--scroller {
      max-height: 300px;
      overflow-y: auto;
    }

    @include popper-shadow();

    @include light-theme() {
      background: $color-white;
    }

    @include dark-theme() {
      background: $color-gray-75;
    }

    &__row {
      height: 34px;
      padding: 0 12px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      background: none;
      border: none;
      width: 100%;
      transition: none;

      &--mention {
        height: 40px;
      }

      &:focus {
        outline: 0;
      }

      @include font-body-2;

      @include light-theme() {
        color: $color-gray-60;
      }

      @include dark-theme() {
        color: $color-gray-25;
      }

      &__short-name {
        margin-left: 4px;
      }

      &--selected,
      &:hover {
        @include light-theme() {
          background: $color-gray-05;
          color: $color-gray-90;
        }

        @include dark-theme() {
          background: $color-gray-60;
          color: $color-gray-05;
        }
      }
    }

    &__title {
      padding-left: 8px;
    }

    stroke: $color-white;
  }
}
