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

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

.quick-action {
  justify-content: space-between;
  display: flex;
  align-items: baseline;
  align-items: center;
  height: 1.5em;

  .action-counter {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 1em;
  }

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

  .separator {
    display: block;
    align-self: stretch;
    width: 1px;
    background-color: var(--icon);
    margin-left: 1em;
    margin-right: 0.5em;
  }

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

    .chevron-icon,
    .extra-button,
    .separator {
      display: none;
    }
  }

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

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

      .active-marker {
        visibility: visible;
      }
    }

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

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

.action-button {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  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);
        }
      }
    }
  }

  &.-extra {
    .action-counter {
      justify-self: end;
      margin-right: 1em;
    }

    .chevron-icon {
      justify-self: end;
    }

    .extra-button {
      justify-self: end;
      justify-content: end;
    }
  }
}