%module-emoji-picker--ribbon {
  height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

%module-composition-popper {
  width: 332px;
  border-radius: 8px;
  // margin-bottom: 6px;
  z-index: 2;
  user-select: none;
  overflow: hidden;

  @include popper-shadow();

  @include light-theme {
    background: $color-gray-02;
    ::-webkit-scrollbar-thumb {
      border: 2px solid $color-gray-02;
    }
  }

  @include dark-theme {
    background: $color-gray-75;
    ::-webkit-scrollbar-thumb {
      border: 2px solid $color-gray-75;
    }
  }
}

.module-emoji-picker {
  @extend %module-composition-popper;
  height: 428px;
  display: grid;
  grid-template-rows: 44px 1fr;
  grid-template-columns: 1fr;

  &__header {
    @extend %module-emoji-picker--ribbon;
    justify-content: space-between;
    margin: 0 12px;

    &__search-field {
      flex-grow: 1;
      margin-left: 8px;
      position: relative;

      @include font-body-2;

      &::after {
        display: block;
        content: '';
        width: 16px;
        height: 16px;
        position: absolute;
        left: 8px;
        top: 6px;

        @include light-theme {
          @include color-svg(
            '../images/icons/v2/search-16.svg',
            $color-gray-60
          );
        }
        @include dark-theme {
          @include color-svg(
            '../images/icons/v2/search-16.svg',
            $color-gray-25
          );
        }
      }

      &__input {
        width: 80%;
        height: 28px;

        @include font-body-1;

        line-height: 28px;

        border-radius: 17px;
        border-width: 1px;
        border-style: solid;
        padding: 0 8px 0 30px;

        &:focus {
          outline: none;
        }

        @include light-theme {
          background: $color-white;
          color: $color-gray-90;
          border-color: $color-gray-60;

          &:focus {
            border-color: $ultramarine-ui-light;
          }

          &:placeholder {
            color: $color-gray-45;
          }
        }

        @include dark-theme {
          border-color: $color-gray-25;
          background: $color-gray-75;
          color: $color-gray-05;

          &:focus {
            border-color: $ultramarine-ui-light;
          }

          &:placeholder {
            color: $color-gray-45;
          }
        }
      }
    }
  }

  &__footer {
    @extend %module-emoji-picker--ribbon;
    justify-content: center;
  }

  &__button {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;

    @include mouse-mode {
      outline: none;
    }

    &--footer {
      &:not(:first-of-type) {
        margin-left: 4px;
      }
    }

    &--selected {
      @include light-theme {
        background: $color-gray-05;
      }

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

    &--icon {
      display: flex;
      justify-content: center;
      align-items: center;

      &::after {
        display: block;
        content: '';
        width: 20px;
        height: 20px;
      }

      &--search {
        &::after {
          @include light-theme {
            @include color-svg(
              '../images/icons/v2/search-16.svg',
              $color-gray-60
            );
          }
          @include dark-theme {
            @include color-svg(
              '../images/icons/v2/search-16.svg',
              $color-gray-25
            );
          }
        }
      }

      &--close {
        &::after {
          @include light-theme {
            @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
          }
          @include dark-theme {
            @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
          }
        }
      }

      &--recents {
        &::after {
          @include light-theme {
            @include color-svg(
              '../images/icons/v2/recent-outline-20.svg',
              $color-gray-60
            );
          }
          @include dark-theme {
            @include color-svg(
              '../images/icons/v2/recent-solid-20.svg',
              $color-gray-25
            );
          }
        }
      }

      &--emoji {
        &::after {
          @include light-theme {
            @include color-svg(
              '../images/icons/v2/emoji-smiley-outline-20.svg',
              $color-gray-60
            );
          }
          @include dark-theme {
            @include color-svg(
              '../images/icons/v2/emoji-smiley-solid-20.svg',
              $color-gray-25
            );
          }
        }
      }

      $categories: animal food activity travel object symbol flag;

      @each $cat in $categories {
        &--#{$cat} {
          &::after {
            @include light-theme {
              @include color-svg(
                '../images/icons/v2/emoji-#{$cat}-outline-20.svg',
                $color-gray-60
              );
            }
            @include dark-theme {
              @include color-svg(
                '../images/icons/v2/emoji-#{$cat}-solid-20.svg',
                $color-gray-25
              );
            }
          }
        }
      }
    }
  }

  &__body {
    padding: 8px 16px 0 12px;
    outline: none;

    &__emoji-cell {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
    }

    &--empty {
      display: flex;
      padding: 0;
      justify-content: center;
      align-items: center;
      @include font-body-1;

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

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