/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../styles/variables.css';

:root {
  --emoji-button-font-family: var(--default-font-family);
  --emoji-button-font-size: var(--default-font-size);
  --emoji-button-size: 30px;
  --emoji-button-background: #fff;
  --emoji-button-background-active: #f6f2fc;
  --emoji-button-border-color: #d9d9d9;
  --emoji-button-border-color-hover: var(--color-primary);
  --emoji-button-border-color-active: var(--emoji-button-border-color-hover);
  --emoji-button-border-radius: var(--emoji-button-size);
  --emoji-button-transition-duration: var(--default-transition-duration);
  --emoji-button-counter-color: color-mod(#000 alpha(50%));
  --emoji-button-counter-color-hover: var(--color-primary);
  --emoji-button-counter-color-active: var(--emoji-button-counter-color-hover);
}

/* Styles */
.container {
  all: initial;
  font-family: var(--emoji-button-font-family);
  height: var(--emoji-button-size);
  border-radius: var(--emoji-button-border-radius);
  background-color: var(--emoji-button-background);
  box-shadow: inset 0 0 0 1px var(--emoji-button-border-color),
    0 1px 2px 0 color-mod(#000 alpha(10%));
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
  transition: all var(--emoji-button-transition-duration) ease;

  &:hover {
    box-shadow: inset 0 0 0 1px var(--emoji-button-border-color-hover),
      0 2px 4px 0 color-mod(#000 alpha(25%));
    & .counter {
      color: var(--emoji-button-counter-color-hover);
    }
  }

  &:active {
    box-shadow: inset 0 0 0 1px var(--emoji-button-border-color-active),
      0 1px 1px 0 color-mod(#000 alpha(25%));
    background-color: var(--emoji-button-background-active);
    & .counter {
      color: var(--emoji-button-counter-color-active);
    }
  }
}

.emoji {
  display: inline-block;
  margin-right: 6px !important;
  vertical-align: middle;
  float: left;
  line-height: 1.1 !important;
}

.counter {
  vertical-align: middle;
  font-size: var(--emoji-button-font-size);
  color: var(--emoji-button-counter-color);
  transition: color var(--emoji-button-transition-duration) ease;
  float: right;
  min-width: 10px;
  text-align: center;
  line-height: 1;
}

.active {
  box-shadow: inset 0 0 0 1px var(--emoji-button-border-color-active),
    0 1px 2px 0 color-mod(#000 alpha(10%));
  background-color: var(--emoji-button-background-active);
  & .counter {
    color: var(--emoji-button-counter-color-active);
  }
}