.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  fill: currentColor;
  stroke: none;
}

.icon {
  &--small {
    width: 1rem;
    height: 1rem;
  }

  &--medium {
    width: 1.125rem;
    height: 1.125rem;
  }

  &--large {
    width: 1.25rem;
    height: 1.25rem;
  }

  // button with icon only
  &--icon {
    &-small {
      width: 1.3125rem;
      height: 1.3125rem;
    }

    &-medium {
      width: 1.75rem;
      height: 1.75rem;
    }

    &-large {
      width: 2rem;
      height: 2rem;
    }
  }
}