@keyframes buttons-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.c-action_buttons {
  border: 1px solid $border;

  &:hover {
    border-color: $button;
  }
}

.c-action_buttons__icon {
  color: $fg;
}

.c-action_buttons__button {
  border-right: 1px solid $border;
  background-color: $button;

  &:only-child {
    border: 1px solid $borderLight;

    &:hover {
      border-color: $borderLight;
    }
  }

  &:focus {
    background-color: $hl;
  }

  &:hover {
    background: $accent;

    .c-action_buttons__icon {
      color: $primary;
    }
  }

  .c-icon--small-star-filled,
  &:hover .c-icon--small-star-filled {
    color: $yellow;
  }

  .c-icon--bookmark-filled,
  &:hover .c-icon--bookmark-filled {
    color: $accent2;
  }
}

.c-message_actions__group {
  background: $button;
}

.c-message_actions__container {
  animation: buttons-fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-message_actions__container,
.c-message_actions__group {
  background: none;
  border: none;
  box-shadow: none;
  overflow: hidden;
  max-width: 40px;
  transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    border-color: $borderLight;
    max-width: 380px;
  }
}

.c-message_actions__button-hover--text {
  color: $text;
}

.c-message_actions__button {
  color: $text;
  border-right: 1px solid $border;
  background: $button;

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

  &:active {
    background: $bg2;
  }

  .c-icon--small-star-filled {
    color: $yellow;
  }

  &:disabled {
    color: $disabled;

    &:hover {
      color: $fg;
    }
  }
}

.c-message_actions__button .c-icon--small-star-filled,
.p-workspace--feature_message_actions_refresh .c-message_actions__button .c-icon--star {
  color: $yellow;
}

.c-message_actions__button .c-icon--bookmark-filled {
  color: $accent;
}

.c-message_actions__button--dividers:not(.c-message_actions__emoji_button):not(.c-message_actions__button--no-divider):not(:hover):after {
  border-left: 1px solid $border;
}

.c-message_actions__emoji_button {
  border-radius: 25px;

  &:hover {
    background: $active;
  }
}

.c-message_actions__emoji_button--hover-light {
  background-color: $hl;
}

.c-message_actions__emoji_button--hover-dark {
  background-color: $hl;
}

.c-icon-selected--true {
  border-radius: 25px;
  background: $hl;
  border: 14px solid $hl;
  margin-right: 0.5em !important;
}
