@import "../mixins/btn";

.c-btn {
  // Elements refs
  $self: #{&};
  $icon: #{$self}__icon;
  $text: #{$self}__text;

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

      width: auto;
      height: $btn-height;
      padding: $btn-padding;
      border-radius: $btn-border-radius;
      font-size: $btn-font-size;
      font-weight: $btn-font-weight;
      line-height: $btn-line-height;
      white-space: nowrap;
    }

    #{$text} {
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 1.2;

      & + #{$icon} {
        margin-left: $btn-icon-margin;
      }
    }

    #{$icon} {
      flex: 0 0 auto;
      font-size: $btn-icon-font-size;

      & + #{$text} {
        margin-left: $btn-icon-margin;
      }
    }

  }

  // 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;
  }

  // Block
  &#{$btn-modifier-block} {
    width: 100%;
  }

  // Size
  &#{$btn-modifier-small} {
    font-size: .75rem;
  }

  &#{$btn-modifier-medium} {
    font-size: 1.25rem;
  }

  &#{$btn-modifier-large} {
    font-size: 1.5rem;
  }
}