.lbaic-settings-emoji {

  --lbaic-settings-emoji-action-bg: rgba(0, 0, 0, 0);
  --lbaic-settings-emoji-fill: currentColor;
  all: initial;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 3px;

  &.active {
    --lbaic-settings-emoji-fill: var(--lbaic-settings-primary);
  }

  &:hover {
    --lbaic-settings-emoji-action-bg: var(--lbaic-settings-button-bg-hover);
  }

  &:active {
    --lbaic-settings-emoji-action-bg: var(--lbaic-settings-button-bg-active);
  }

  &-toggle {
    width: 100%;
    height: 100%;
    background-color: var(--lbaic-settings-emoji-action-bg);
    border-radius: 6px;

    &-i {
      width: 16px;
      height: auto;
      display: block;
      margin: auto;
      fill: var(--lbaic-settings-emoji-fill);
    }
  }

  &-in {
    & {
      --lbaic-settings-emoji-in-shadow: 0 4px 12px 0 rgba(var(--lbaic-settings-black-rgb), 0.12);
    }

    position: absolute;
    top: var(--lbaic-settings-emoji-in-top, unset);
    right: var(--lbaic-settings-emoji-in-right, unset);
    bottom: var(--lbaic-settings-emoji-in-bottom, unset);
    border-radius: 6px;
    box-shadow: var(--lbaic-settings-emoji-in-shadow);
    transform: translate3d(0, -4px, 0);
    transition: transform 180ms ease-in-out, opacity 180ms ease-in-out;
    z-index: 300;

    .EmojiPickerReact {
      // General
      --epr-highlight-color: var(--lbaic-settings-primary);
      --epr-bg-color: var(--lbaic-settings-input-bg);
      --epr-text-color: var(--lbaic-settings-input-color);
      --epr-focus-bg-color: rgba(var(--lbaic-settings-primary-rgb), 0.4);
      --epr-hover-bg-color: rgba(var(--lbaic-settings-primary-rgb), 0.2);
      --epr-horizontal-padding: 10px;
      --epr-header-padding: 0 var(--epr-horizontal-padding);
      --epr-picker-border-color: var(--lbaic-settings-input-border);
      --epr-picker-border-radius: 6px;

      // Header
      .epr-header {
        padding-block-start: var(--epr-horizontal-padding);
      }

      // Search
      --epr-search-input-bg-color: var(--lbaic-settings-input-bg);
      --epr-search-input-height: 30px;
      --epr-search-input-padding: 8px 10px;
      --epr-search-input-border-radius: var(--epr-picker-border-radius);
      --epr-search-input-text-color: var(--lbaic-settings-input-color);

      .epr-search-container {
        font-size: var(--lbaic-settings-fs-13); // TODO - delete if possible

        & > input {
          &:focus {
            border: 1px solid var(--lbaic-settings-primary);
            box-shadow: none;
            outline: none;
          }
        }
      }

      // Skin
      .epr-skin-tones {
        padding: 6px 0; // TODO - delete if possible
      }

      // Category navigation
      --epr-category-navigation-button-size: 20px;
      --epr-category-icon-active-color: var(--lbaic-settings-primary);

      .epr-category-nav {
        padding-block: 6px;
      }

      // Category label
      --epr-category-label-padding: 0 var(--epr-horizontal-padding);
      --epr-category-label-height: 20px;

      .epr-emoji-category-label {
        font-size: 10px; // TODO - delete if possible
        position: unset;
        font-weight: 400;
        text-transform: uppercase;
      }

      // Emoji
      --epr-emoji-size: 20px;
    }
  }
}