@import "../mixins/btn";

.c-icon-btn {
  $self: #{&};
  $icon: #{$self}__icon;

  // Styles
  @at-root {

    #{$self} {
      @include btn-style-base;
      @include no-select;

      width: $icon-btn-default-size;
      height: $icon-btn-default-size;
      padding: 0;
      border-radius: calc(#{$icon-btn-default-size} / 2);
      font-size: $icon-btn-font-size;
      line-height: 1;
    }

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

  // Colored
  @include btn-modifier-colored($modifier-color-primary, $color-primary);
  @include btn-modifier-colored($modifier-color-secondary, $color-secondary);
  @include btn-modifier-colored($modifier-color-success, $color-success);
  @include btn-modifier-colored($modifier-color-error, $color-error);
  @include btn-modifier-colored($modifier-color-warn, $color-warn);
  @include btn-modifier-colored($modifier-color-info, $color-info);
  @include btn-modifier-colored($modifier-color-light, $color-light, $btn-font-color);
  @include btn-modifier-colored($modifier-color-dark, $color-dark);

  // Transparent
  &#{$btn-modifier-transparent} {
    background-clip: padding-box;

    @include btn-transparent($btn-font-color);
    @include btn-modifier-transparent($modifier-color-primary, $color-primary);
    @include btn-modifier-transparent($modifier-color-secondary, $color-secondary);
    @include btn-modifier-transparent($modifier-color-success, $color-success);
    @include btn-modifier-transparent($modifier-color-error, $color-error);
    @include btn-modifier-transparent($modifier-color-warn, $color-warn);
    @include btn-modifier-transparent($modifier-color-info, $color-info);
    @include btn-modifier-transparent($modifier-color-light, $color-light);
    @include btn-modifier-transparent($modifier-color-dark, $color-dark);
  }

  // Bordered
  &#{$btn-modifier-bordered} {
    background-color: transparent;

    @include btn-bordered($btn-font-color);
    @include btn-modifier-bordered($modifier-color-primary, $color-primary);
    @include btn-modifier-bordered($modifier-color-secondary, $color-secondary);
    @include btn-modifier-bordered($modifier-color-success, $color-success);
    @include btn-modifier-bordered($modifier-color-error, $color-error);
    @include btn-modifier-bordered($modifier-color-warn, $color-warn);
    @include btn-modifier-bordered($modifier-color-info, $color-info);
    @include btn-modifier-bordered($modifier-color-light, $color-light, $btn-font-color);
    @include btn-modifier-bordered($modifier-color-dark, $color-dark);
  }

  // Elevated
  &#{$btn-modifier-elevated} {
    @include btn-elevated;
  }

  // Size
  &#{$btn-modifier-small} {
    width: 1.25em;
    height: 1.25em;
    font-size: 1.25rem;
  }
  &#{$btn-modifier-medium} {;
    font-size: 1.75rem;
  }
  &#{$btn-modifier-large} {
    font-size: 2rem;
  }
}