.c-icon-btn {
  // Element & modifiers vars
  $self: #{&};
  $icon: #{$self}__icon;

  $mod-color-primary: #{$self}--primary;
  $mod-color-secondary: #{$self}--secondary;
  $mod-color-success: #{$self}--success;
  $mod-color-error: #{$self}--error;
  $mod-color-warn: #{$self}--warn;
  $mod-color-info: #{$self}--info;

  $mod-elevated: #{$self}--elevated;
  $mod-dense: #{$self}--dense;
  $mod-transparent: #{$self}--transparent;

  // Config vars
  $font-size: 24px;

  $font-color: $g-font-color;
  $background-color: $btn-base-color;

  $disabled-font-color: $disabled-font-color;
  $disabled-background: $disabled-background;

  // Mixins
  @mixin make-modifier($name) {
    #{$name} {
      @content
    }
  }

  @mixin make-colored($name, $background, $text: #fff) {
    @include make-modifier($name) {
      background: $background;
      color: $text;

      &:hover,
      &:focus {
        background: lighten($background, 5%);
        color: $text;
      }

      &:active {
        background: darken($background, 5%);
        color: $text;
      }

      @content
    }
  }

  @mixin make-transparent($mod-name, $color) {
    &#{$mod-name} {
      background: transparent;
      color: $color;

      &:hover,
      &:focus {
        background: rgba($color, 0.2);
      }

      &:active {
        background: rgba(darken($color, 5%), 0.3);
      }
    }
  }

  // Styles
  @at-root {

    #{$self} {
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      width: 1.75em;
      height: 1.75em;
      padding: 0;
      margin: 0;
      border: none;
      border-radius: calc(1.75em / 2);
      background: $background-color;
      color: inherit;
      font-size: $font-size;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      transition: box-shadow $g-transition, background-color $g-transition, color $g-transition;
      @include no-select();

      &:hover,
      &:focus {
        background: darken($background-color, 5%);
        text-decoration: none;
      }

      &:active {
        background: darken($background-color, 10%);
      }

      &[disabled],
      &[disabled="disabled"] {
        background: $disabled-background !important;
        color: $disabled-font-color !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
        pointer-events: unset;
      }
    }

    #{$icon} {
      flex: 0 0 auto;
      display: inline-block;
      margin: auto;
    }

    /**
     ** Mods
     */
    // Colors
    @include make-colored($mod-color-primary, $color-primary);
    @include make-colored($mod-color-secondary, $color-secondary);
    @include make-colored($mod-color-success, $color-success);
    @include make-colored($mod-color-error, $color-error);
    @include make-colored($mod-color-warn, $color-warn);
    @include make-colored($mod-color-info, $color-info);

    // Elevated
    @include make-modifier($mod-elevated) {
      @include box-elevation(3);

      &:hover,
      &:focus {
        @include box-elevation(6)
      }

      &:active {
        @include box-elevation(1);
      }
    }

    // Dense
    @include make-modifier($mod-dense) {
      width: 1.25em;
      height: 1.25em;
    }

    // Transparent
    @include make-modifier($mod-transparent) {
      background: transparent;

      &:hover,
      &:focus {
        background: rgba(#000, 0.1);
      }

      &:active {
        background: rgba(#000, 0.2);
      }

      @include make-transparent($mod-color-primary, $color-primary);
      @include make-transparent($mod-color-secondary, $color-secondary);
      @include make-transparent($mod-color-success, $color-success);
      @include make-transparent($mod-color-error, $color-error);
      @include make-transparent($mod-color-warn, $color-warn);
      @include make-transparent($mod-color-info, $color-info);
    }
  }

}