.emoji-picker-container {
  @include media-breakpoint-up(sm) {
    position: absolute;
    right: -2px;
    top: -5px;
    padding: 0;
  }

  .emoji-picker {
    position: relative;
    z-index: 2;

    @include media-breakpoint-up(sm) {
      // We can't easily relate emoji width to
      // the panel width, because there's no 
      // way to subtract scrollbar width in pure CSS.

      width: 430px;
      padding: 0 0.5rem;
    }

    .card {
      @include media-breakpoint-up(sm) {
        padding: 0.75rem;

        .triangle {
          position: absolute;
          top: -5px;
          right: 12px;
          z-index: 3;
          width: 10px;
          height: 10px;
          border: inherit;
          background-color: inherit;
          border-right: none;
          border-bottom: none;
          transform: rotate(45deg);
        }
      }

      @include media-breakpoint-down(sm) {
        border-right: none;
        border-left: none;
        border-bottom: none;
        border-radius: 0;
        margin-bottom: 0;
      }

      .emoji-grid {
        @include media-breakpoint-up(sm) {
          order: 1;
        }

        .emoji-scroll {
          height: 285px;
          margin: 0 0 10px;
          overflow-y: scroll;

          @include media-breakpoint-up(sm) {
            margin: 10px 0;
          }

          .category {
            &:last-child {
              margin-bottom: 10px;
            }

            h5 {
              margin: 0.5rem 0 0.25rem;
              color: #666666;
              font-weight: bold;
              font-size: 0.85em;
              border-bottom: 1px solid #e0e0e0;
            }

            .category-emojis {
              img.emoji {
                $emojiSize: 32px;
                box-sizing: border-box;
                width: $emojiSize;
                height: $emojiSize;
                padding: 4px;
                border-radius: 4px;
                cursor: pointer;

                &:hover {
                  background-color: #e5e5e5;
                }
              }

              &:empty {
                &:after {
                  font-size: 0.75em;
                  padding: 0.5rem;
                  content: 'Loading...';
                }
              }
            }
          }
        }

        .emoji-preview-box {
          display: none;
          box-sizing: border-box;
          padding: 0.25rem 0.5rem;
          width: 100%;
          background-color: #fbfbfb;
          border: 1px solid #eee;
          overflow: hidden;
          border-radius: 0.25rem 0.5rem;

          @include media-breakpoint-up(sm) {
            display: block;
          }

          $height: 43px;

          .emoji-preview {
            min-height: $height;

            .emoji-name {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;

              p.title {
                margin: 0;
              }

              code.id {
                margin-left: auto;
                font-weight: bold;
              }
            }

            small {
              font-size: 0.85em;
              color: darkGray;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-family: monospace;
            }
          }

          .emoji-placeholder {
            text-align: center;
            margin: 0;
            line-height: $height;
            color: lightGray;
          }
        }
      }

      .search-box {
        display: flex;

        .btn {
          display: flex;
          align-items: center;
          margin-left: 5px;

          i {
            margin-right: 7px;
          }

          @include media-breakpoint-up(sm) {
            display: none;
          }
        }
      }
    }
  }
}
