emoji-picker-element/src/picker/styles/picker.scss

@import './global.scss';

// These z-indexes are used to manage the skintone picker animation and make it look nicer.
// The skintone picker should appear to expand "behind" the skintone button.
$skintoneZIndex1: 1;
$skintoneZIndex2: 2;
$skintoneZIndex3: 3;

//
// skintone picker
//

.skintone-button-wrapper {
  background: var(--background);
  z-index: $skintoneZIndex3;
}

.skintone-button-wrapper.expanded {
  z-index: $skintoneZIndex1; // place behind the skintone dropdown after the listbox has animated
}

.skintone-list {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  z-index: $skintoneZIndex2;
  overflow: visible;
  background: var(--background);
  border-bottom: var(--border-size) solid var(--border-color);
  border-radius: 0 0 var(--skintone-border-radius) var(--skintone-border-radius);
  will-change: transform;
  transition: transform 0.2s ease-in-out;
  transform-origin: center 0;

  @media (prefers-reduced-motion: reduce) {
    // We still want the transition event to fire, so we can listen for the transitionend event
    // but unfortunately transition: none would just eliminate this entirely. So just make it
    // effectively instant. I found 0.001s looks best in Firefox (avoids a jerky split-second animation)
    // while still fixing WebKit (which doesn't work if you set 0s or transition-delay: -1s or other hacks).
    // see also: https://github.com/jensimmons/cssremedy/issues/11
    transition-duration: 0.001s;
  }

  // TODO: remove this when old iOS Safari drops out of usage: https://caniuse.com/css-logical-props
  // For now, we don't support RTL in old versions of iOS
  @supports not (inset-inline-end: 0) {
    right: 0;
  }

  &.no-animate {
    transition: none;
  }
}


//
// tab panel
//

.tabpanel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; // fix iOS scrolling
  will-change: transform; // fix "repaints on scroll" warning in Chrome https://crbug.com/514303
  min-height: 0;
  flex: 1;
  contain: content;
}

.emoji-menu {
  display: grid;
  grid-template-columns: repeat(var(--num-columns), var(--total-emoji-size));
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
}

.category {
  padding: var(--emoji-padding);
  font-size: var(--category-font-size);
  color: var(--category-font-color);
}

//
// emoji
//

button.emoji,
.emoji {
  font-size: var(--emoji-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  height: var(--total-emoji-size);
  width: var(--total-emoji-size);
  line-height: 1;
  overflow: hidden;
  font-family: var(--font-family);
  cursor: pointer;

  // see https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
  @media(hover: hover) and (pointer: fine) {
    &:hover {
      background: var(--button-hover-background);
    }
  }

  &:active,
  &.active {
    background: var(--button-active-background);
  }
}

.custom-emoji {
  height: var(--total-emoji-size);
  width: var(--total-emoji-size);
  padding: var(--emoji-padding);
  object-fit: contain;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--emoji-size) var(--emoji-size);
}

//
// nav
//

.nav {
  display: grid;
  justify-content: space-between;
  align-items: center;
  contain: content;
}

.nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-emoji {
  font-size: var(--category-emoji-size);
  width: var(--total-category-emoji-size);
  height: var(--total-category-emoji-size);
}

//
// indicator
//

.indicator-wrapper {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.indicator {
  $opacityAnim: 0.1s;
  $transformAnim: 0.25s;
  width: calc(100% / var(--num-groups));
  height: var(--indicator-height);
  opacity: var(--indicator-opacity);
  background-color: var(--indicator-color);
  will-change: transform, opacity;
  transition: opacity #{$opacityAnim} linear, transform #{$transformAnim} ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    will-change: opacity;
    transition: opacity #{$opacityAnim} linear;
  }
}

//
// search
//

.pad-top {
  width: 100%;
  height: var(--emoji-padding);
  z-index: $skintoneZIndex3;
  background: var(--background);
}

.search-row {
  display: flex;
  align-items: center;
  position: relative;
  padding-inline-start: var(--emoji-padding);
  padding-bottom: var(--emoji-padding);
}

.search-wrapper {
  flex: 1;
  min-width: 0;
}

input.search {
  padding: var(--input-padding);
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color);
  background: var(--background);
  color: var(--input-font-color);
  width: 100%;
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);

  &::placeholder {
    color: var(--input-placeholder-color);
  }
}

// favorites

.favorites {
  display: flex;
  flex-direction: row;
  border-top: var(--border-size) solid var(--border-color);
  contain: content;
}

//
// unsupported warning
//

.message {
  padding: var(--emoji-padding);
}