.c-reaction {
  background: transparent;

  &.c-button--focus-visible:focus, &.focus-ring {
    background: $bg;
  }

  &:hover {
    box-shadow: none;
    background: $bg;
  }
}

.c-reaction--reacted {
  box-shadow: inset 0 0 0 1px $button;
  background: $button;

  &:hover {
    background: $hl;
    color: $selectFg;
  }

  &.c-reaction--dark {
    background-color: $button;
    border-color: $button;

    .c-reaction__count {
      color: $fg;
    }
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx),
only screen and (min-resolution: 192dpi) {
  .c-reaction--reacted {
    box-shadow: inset 0 0 0 1.5px $button;
  }
}

.c-reaction__count {
  color: $fg;
}

.c-reaction--reacted .c-reaction__count {
  color: $primary;
}

.c-reaction_add,
.c-reaction_expand {
  background: $button;

  &.c-button--focus-visible:focus, &.focus-ring {
    background: $hl;
  }

  &:hover {
    background: $hl;
    box-shadow: inset 0 0 1px $primaryT;
  }

  &.c-reaction_add--dark {
    &:focus .c-icon--small-reaction-bg,
    &:hover .c-icon--small-reaction-bg {
      color: $primary;
    }

    &:focus .c-icon--small-reaction,
    &:hover .c-icon--small-reaction {
      color: $bg;
    }
  }
}

.c-reaction_add__icon--fg {
  z-index: 1;
  color: $fg;
}

.c-reaction_add {
  &:focus .c-reaction_add__icon--fg,
  &:hover .c-reaction_add__icon--fg {
    color: $primary;
  }

  &:focus .c-reaction_add__icon--bg,
  &:hover .c-reaction_add__icon--bg {
    color: $accent;
  }
}

.c-reaction_expand--reacted {
  background: $button;

  &:hover {
    box-shadow: inset 0 0 0 1px $primaryT;
    background: $hl;
  }
}

.c-reaction__tip_subtitle {
  color: $text;
}

.c-reaction_add__note {
  background: $button;
  color: $primary;
}

.c-message_kit__reaction_condensed {
  color: $disabled;
}

.c-message_kit__replies_count {
  color: $text;
}

.c-reaction_reactji-pulse {
  &:before {
    background: $yellow;
  }

  &:after {
    box-shadow: 0 0 4px 2px $yellow;
  }
}

.c-reaction_reactji-pulse .c-reaction_pulse {
  background: $fg;
}

@keyframes c-reaction-pulse {
  0% {
    box-shadow: none;
  }

  5% {
    box-shadow: inset 0 0 0 1px $orange;
  }

  10%,
  50% {
    background: $bg2;
    box-shadow: inset 0 0 0 1px $orange;
  }

  95%,
  to {
    box-shadow: none;
  }
}

.c-reaction_bar--dark {
  .c-reaction_add__note {
    background: $button;
    color: $accent2;

    &:focus, &:hover {
      box-shadow: inset 0 0 0 1px $primaryT;
    }
  }

  .c-reaction_reactji-pulse {
    &:before {
      background: $orange;
    }

    &:after {
      box-shadow: 0 0 4px 2px $orange;
    }
  }
}

@keyframes c-reaction-pulse-dark {
  0% {
    box-shadow: none;
  }

  5% {
    box-shadow: inset 0 0 0 1px $orange;
  }

  10%,
  50% {
    background: $bg2;
    box-shadow: inset 0 0 0 1px $orange;
  }

  95%,
  to {
    box-shadow: none;
  }
}
