.btn {
  &.btn-fab-flat {
    @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-fab-variant(
        transparent,
        transparent,
        $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-fab-variant($value, $value);
        }
      }
    }

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

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

    box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);

    // // enlarged shadow on hover, focus
    // &:focus {
    //   z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
    //   box-shadow: 0 0 8px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.36);
    // }

    // :active - momentary press: big shadow, release and it is gone
    // .active - persistent big shadow
    &.active,
    &:active,
    &:focus,
    &:hover {
      z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
      box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
    }

    // reverse any of the above for links
    &.btn-link {
      box-shadow: none;

      &.active {
        box-shadow: none;
      }
      @include hover-focus-active() {
        box-shadow: none;
      }
    }

    fieldset[disabled] &,
    &.disabled,
    &:disabled,
    &[disabled] {
      box-shadow: none;
    }
  }
}