@use 'mixins';
@use 'variables';

.emoji-container {
  margin-bottom: -1px;
  font-size: 1.25em;
  line-height: 1em;
}

.emoji-container.small {
  font-size: 1.35em;
}
.emoji-container.medium {
  font-size: 1.75em;
}
.emoji-container.large {
  font-size: 2.5em;
}
.emoji-container.jumbo {
  font-size: 3em;
}

// This is the emoji button in the composer
button.emoji {
  width: 36px;
  height: 36px;
  padding: 0;
  opacity: 0.5;
  border: none;
  background: transparent;

  &:before {
    content: '';
    display: inline-block;
    width: variables.$button-height;
    height: variables.$button-height;
    @include mixins.color-svg('./images/smile.svg', var(--composerBtnColor));
  }

  &:focus,
  &:hover {
    opacity: 1;
  }
}
