.btn {
  &.btn-icon {
    @include button-icon-size($btn-padding-y, $font-size-base, $btn-line-height);

    border-radius: 50%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;

    &.btn-xs,
    .btn-group-xs & {
      @include button-icon-size($btn-padding-y-xs, $font-size-xs, $btn-line-height-xs);
    }
    &.btn-sm,
    .btn-group-sm & {
      @include button-icon-size($btn-padding-y-sm, $font-size-sm, $btn-line-height-sm);
    }
    &.btn-lg,
    .btn-group-lg & {
      @include button-icon-size($btn-padding-y-lg, $font-size-lg, $btn-line-height-lg);
    }
    &.btn-xl,
    .btn-group-xl & {
      @include button-icon-size($btn-padding-y-xl, $font-size-xl, $btn-line-height-xl);
    }

    &:not(.btn-link) {
      @include button-icon-variant($btn-clear-color);
    }

    &.btn-link {
      @include hover {
        text-decoration: underline;
      }
    }

    .uex-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0;
      transform: translate(-50%, -50%);
    }

    @each $color, $value in $social-colors {
      @if $color != "link" {
        &.btn-#{$color} {
          @include button-icon-variant($value);
        }
      }
    }

    @each $color, $value in $theme-colors {
      @if $color != "link" {
        &.btn-#{$color} {
          @include button-icon-variant($value);
        }
      }
    }

    @each $color, $value in $colors {
      @if $color != "link" {
        &.btn-#{$color} {
          @include button-icon-variant($value);
        }
      }
    }
  }
}