.#{$ns}Remark {
  display: inline-block;
  margin-left: $Remark-marginLeft;

  cursor: pointer;
  text-align: center;

  &-icon {
    color: $Remark-iconColor;
    font-size: $Remark-icon-fontSize;
    background-color: $Remark-bg;
    border: $Remark-borderWidth solid $Remark-borderColor;
    width: $Remark-width;
    height: $Remark-width;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: $fontSizeBase;
  }

  &:hover > &-icon {
    color: $Remark-onHover-iconColor;
    background-color: $Remark-onHover-bg;
    border-color: $Remark-onHover-borderColor;
  }

  > svg {
    width: ($Remark-width - px2rem(2px));
    height: ($Remark-width - px2rem(2px));
    color: $Remark-iconColor;
  }

  &:hover > svg {
    color: $Remark-onHover-iconColor;
  }
}