pleroma-fe/src/components/status_action_buttons/action_button.scss

@import "../../mixins";
/* stylelint-disable declaration-no-important */

.quick-action {
  display: grid;
  grid-template-columns: max-content;
  grid-gap: 0.25em;

  &.-pin {
    margin: calc(-2px - 0.25em);
    padding: 0.25em;
    border: 2px dashed var(--icon);
    border-radius: var(--roundness);
    grid-template-columns: 1fr auto;
  }

  .action-button-inner,
  .extra-button {
    margin: -0.5em;
    padding: 0.5em;
  }

  .action-button-inner {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: max-content max-content;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
  }

  .extra-button {
    border-left: 1px solid var(--icon);
  }
}

.action-button {
  display: grid;
  grid-auto-flow: column;
  padding: 0;

  .action-button-inner {
    &:hover,
    &.-active {
      &.reply-button:not(.disabled) {
        .svg-inline--fa {
          color: var(--cBlue);
        }
      }

      &.retweet-button:not(.disabled) {
        .svg-inline--fa {
          color: var(--cGreen);
        }
      }

      &.favorite-button:not(.disabled) {
        .svg-inline--fa {
          color: var(--cOrange);
        }
      }
    }
  }

  @include unfocused-style {
    .focus-marker {
      visibility: hidden;
    }

    .active-marker {
      visibility: visible;
    }
  }

  @include focused-style {
    .focus-marker {
      visibility: visible;
    }

    .active-marker {
      visibility: hidden;
    }
  }
}