.btn-shadow-round-icon {
  $this:                                                    &;

  max-width:                                                100%;
  max-height:                                               100%;
  display:                                                  inline-block;
  background-color:                                         $shadow-round-icon-button-bg-color;
  vertical-align:                                           middle;
  color:                                                    $shadow-round-icon-button-color;
  padding:                                                  map-get($spacers, $shadow-round-icon-button-spacing) / 4 map-get($spacers, $shadow-round-icon-button-spacing) / 2;
  border-radius:                                            map-get($spacers, $shadow-round-icon-button-spacing);
  margin-right:                                             map-get($spacers, $shadow-round-icon-button-spacing) / 4;
  margin-bottom:                                            map-get($spacers, $shadow-round-icon-button-spacing) / 2;
  //transition:                                               background-color 0.5s ease;


  @include                                                  ripple(rgba($shadow-round-icon-button-active-bg-color, 0.1));
  @include                                                  fade-in(1);
  @for $i from 1 through 10 {
    &:nth-of-type(#{$i}) {
      animation-delay:                                      #{0.2+($i)/9}s;
    }
  }
  @include media-breakpoint-down(md) {
    padding:                                                map-get($spacers, $shadow-round-icon-button-spacing) / 8 map-get($spacers, $shadow-round-icon-button-spacing) / 4;
    margin-bottom:                                          map-get($spacers, $shadow-round-icon-button-spacing) / 4;
    margin-right:                                           map-get($spacers, $shadow-round-icon-button-spacing) / 8;
    font-size:                                              $font-size-base * 0.8;
  }

  .fa-icon {
    width:                                                  auto;
    height:                                                 1.5rem;
    max-width:                                              100%;
    max-height:                                             100%;
    color:                                                  $shadow-round-icon-button-color;
    vertical-align:                                         middle;

    @at-root #{$this}.active .fa-icon {
      color:                                                $shadow-round-icon-button-active-color;
    }
  }

  &.active {
    color:                                                  $shadow-round-icon-button-active-color;
    background-color:                                       $shadow-round-icon-button-active-bg-color;

    @include                                                drop-shadow(0px, 4px, 2px, rgba(0,0,0,0.2));
  }

  &:hover {
    //background-color:                                       darken($shadow-round-icon-button-bg-color, 10%);
    cursor:                                                 pointer;

    @include                                                drop-shadow(0px, 4px, 2px, rgba(0,0,0,0.2));
    @at-root #{$this}.active:hover {
      //background-color:                                     darken($shadow-round-icon-button-active-bg-color, 10%);
      cursor:                                               default;
    }
  }
}