@import (reference) '../../styles/custom.less';

.Buttons {
  color: @blue-botticelli;
  font-size: 14px;
  font-weight: bold;

  &__reactions-count {
    cursor: pointer;
    &:hover {
      color: @primary-color;
    }
  }

  &__link {
    color: @blue-botticelli;
    transition: none;

    & > .iconfont {
      margin-right: 4px;
      font-size: 24px !important;
      color: @blue-linkWater;
    }

    & > .anticon {
      margin-right: 8px;
      color: @blue-linkWater;
      vertical-align: 3px;
    }

    & > span {
      vertical-align: top;
    }

    &:hover {
      color: @primary-color;
    }

    &:hover > .iconfont,
    &.active > .iconfont {
      color: @primary-color;
    }
  }

  &__number {
    vertical-align: 3px;
    margin-right: 10px;
  }

  &__dislike:before {
    display: inline-block;
    transform: rotate(180deg);
    vertical-align: -2px;
  }

  &__share {
    vertical-align: -1px;
    margin-right: 10px !important;
  }

  &__icon-text {
    font-weight: bold;
    margin-left: 4px;
    vertical-align: 2px;

    &-dislike {
      margin-left: 8px;
    }
  }

  &__post-menu {
    cursor: pointer;

    &:hover {
      color: @primary-color;
    }
  }
}
