Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

%emoji-menu-toggle-button {
  line-height: 1;
  padding: 0;
  min-width: 16px;
  color: gray;
  fill: gray;

  .fa {
    position: relative;
    font-size: 16px;
  }

  svg {
    margin: 0;
  }

  .award-control-icon-positive,
  .award-control-icon-super-positive {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  &:hover,
  &:active,
  &.is-active {
    .danger-highlight {
      color: red;
    }

    .link-highlight {
      color: blue;
      fill: blue;
    }

    .award-control-icon-neutral {
      opacity: 0;
    }

    .award-control-icon-positive {
      opacity: 1;
    }
  }

  &:active,
  &.is-active {
    .award-control-icon-positive {
      opacity: 0;
    }

    .award-control-icon-super-positive {
      opacity: 1;
    }
  }
}

.note-action-button {
  @extend %emoji-menu-toggle-button;
}

.edit-user {
  .clear-user-status {
    svg {
      fill: gray;
    }
  }

  .emoji-menu-toggle-button {
    @extend %emoji-menu-toggle-button;

    .no-emoji-placeholder {
      position: relative;

      svg {
        fill: gray;
      }
    }
  }
}

SassMeister-output.css

.note-action-button, .edit-user .emoji-menu-toggle-button {
  line-height: 1;
  padding: 0;
  min-width: 16px;
  color: gray;
  fill: gray;
}

.note-action-button .fa, .edit-user .emoji-menu-toggle-button .fa {
  position: relative;
  font-size: 16px;
}

.note-action-button svg, .edit-user .emoji-menu-toggle-button svg {
  margin: 0;
}

.note-action-button .award-control-icon-positive, .edit-user .emoji-menu-toggle-button .award-control-icon-positive,
.note-action-button .award-control-icon-super-positive,
.edit-user .emoji-menu-toggle-button .award-control-icon-super-positive {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.note-action-button:hover .danger-highlight, .edit-user .emoji-menu-toggle-button:hover .danger-highlight, .note-action-button:active .danger-highlight, .edit-user .emoji-menu-toggle-button:active .danger-highlight, .is-active.note-action-button .danger-highlight, .edit-user .is-active.emoji-menu-toggle-button .danger-highlight {
  color: red;
}

.note-action-button:hover .link-highlight, .edit-user .emoji-menu-toggle-button:hover .link-highlight, .note-action-button:active .link-highlight, .edit-user .emoji-menu-toggle-button:active .link-highlight, .is-active.note-action-button .link-highlight, .edit-user .is-active.emoji-menu-toggle-button .link-highlight {
  color: blue;
  fill: blue;
}

.note-action-button:hover .award-control-icon-neutral, .edit-user .emoji-menu-toggle-button:hover .award-control-icon-neutral, .note-action-button:active .award-control-icon-neutral, .edit-user .emoji-menu-toggle-button:active .award-control-icon-neutral, .is-active.note-action-button .award-control-icon-neutral, .edit-user .is-active.emoji-menu-toggle-button .award-control-icon-neutral {
  opacity: 0;
}

.note-action-button:hover .award-control-icon-positive, .edit-user .emoji-menu-toggle-button:hover .award-control-icon-positive, .note-action-button:active .award-control-icon-positive, .edit-user .emoji-menu-toggle-button:active .award-control-icon-positive, .is-active.note-action-button .award-control-icon-positive, .edit-user .is-active.emoji-menu-toggle-button .award-control-icon-positive {
  opacity: 1;
}

.note-action-button:active .award-control-icon-positive, .edit-user .emoji-menu-toggle-button:active .award-control-icon-positive, .is-active.note-action-button .award-control-icon-positive, .edit-user .is-active.emoji-menu-toggle-button .award-control-icon-positive {
  opacity: 0;
}

.note-action-button:active .award-control-icon-super-positive, .edit-user .emoji-menu-toggle-button:active .award-control-icon-super-positive, .is-active.note-action-button .award-control-icon-super-positive, .edit-user .is-active.emoji-menu-toggle-button .award-control-icon-super-positive {
  opacity: 1;
}

.edit-user .clear-user-status svg {
  fill: gray;
}

.edit-user .emoji-menu-toggle-button .no-emoji-placeholder {
  position: relative;
}

.edit-user .emoji-menu-toggle-button .no-emoji-placeholder svg {
  fill: gray;
}