.md-button-circle-width-override {
  padding: unset;
  aspect-ratio: 1 / 1;
}

// for ButtonCircle in ButtonGroup case (to be removed once ButtonGroup is refactored)
[data-compressed='true'] {
  > .md-button-circle-wrapper {
    &[size='64'] {
      width: 3.2rem;

      --mdc-button-prefix-icon-size: 1.5rem;
    }

    &[size='52'] {
      width: 2.6rem;

      --mdc-button-prefix-icon-size: 1.25rem;
    }

    &[size='40'] {
      width: 1.875rem;

      --mdc-button-prefix-icon-size: 1rem;
    }

    &[size='32'] {
      width: 1.5rem;

      --mdc-button-prefix-icon-size: 1rem;
    }

    &[size='28'] {
      width: 1.31rem;

      --mdc-button-prefix-icon-size: 0.75rem;
    }

    // this size is ONLY for AddReactionButton
    &[size='20'] {
      width: 1.2rem;

      --mdc-button-prefix-icon-size: 0.75rem;
    }
  }
}