// Buttons
.c-btn {
  @include btn-base;

  &:active,
  &-active {
    @include btn-active;
  }

  &:focus,
  &-focus {
    @include btn-focus;
  }

  &-disabled,
  &.c-btn-disabled,
  &[disabled] {
    @include btn-disabled;
  }

  // Button color loop
  @each $type in map-keys($button-colors) {
    &-#{$type} {
      @include button-colors(map-get($button-colors, $type));
    }
  }

  // Button size loop
  @each $type in map-keys($button-sizes) {
    @if $type == default {
      @include button-sizing(map-get($button-sizes, default));
    } @else {
      &-#{$type} {
        @include button-sizing(map-get($button-sizes, $type));
      }
    }
  }
}

// Button links
.c-btn-link {
  @include btn-base;

  box-shadow: none;
  color: $btn-default-c;
  background: transparent;
  transition: all 0.3s ease 0s;
  border: 1px solid transparent;
  font-weight: $btn-font-weight;

  &:hover {
    border: $btn-link-bd;
    background-color: $btn-link-hover-bg;
  }

  &:active {
    @include btn-active;

    border: $btn-link-bd;
    color: $color-primary-9;
  }

  &.c-btn-disabled,
  &-disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active {
      background: transparent;
      color: $btn-disabled-c;
      line-height: 1;
      border-color: transparent;
      cursor: not-allowed;
      appearance: none;
      box-shadow: none;
    }
  }

  @each $type in map-keys($button-sizes) {
    @if $type == default {
      @include button-sizing(map-get($button-sizes, default));
    } @else {
      &-#{$type} {
        @include button-sizing(map-get($button-sizes, $type));
      }
    }
  }

  @each $name, $hex in $theme-colors {
    &-#{$name} {
      color: $hex;

      &:active {
        color: $hex;
        box-shadow: none;
      }
    }
  }
}

// Button shapes
@if $enable-btn-outline == true {
  @each $name, $hex in $theme-colors {
    .c-btn-#{$name}-outline {
      @include btn-outline($hex);
    }
  }

  .c-btn-default-outline,
  .c-btn-secondary-outline {
    @include btn-outline($color-gray-7);
  }
}

@if $enable-btn-circle == true {
  .c-btn-circle {
    border-radius: $radius-round;
  }
}

@if $enable-btn-square == true {
  .c-btn-square {
    border-radius: $radius-0;
  }
}

@if $enable-btn-pill == true {
  .c-btn-pill {
    border-radius: $radius-pill;
  }
}


// Button Icons/Circle/Box
.c-btn-icon,
.c-btn-circle,
.c-btn-box {
  width: $btn-box-width;
  padding-left: $space-0;
  padding-right: $space-0;
  text-align: center;

  @each $name, $size in $btn-box-sizes {
    &.c-btn-#{$name} {
      width: $size;
    }
  }
}

.c-btn-icon {
  background: transparent;
  border: 1px solid transparent;
  color: $color-gray-5;
  transition: all 0.3s ease 0s;

  &:hover {
    color: $color-primary-7;
    background-color: $color-gray-1;
    border: 1px solid $color-gray-4;
  }

  // All default color classes
  @each $name, $hex in $theme-colors {
    &-#{$name} {
      &:hover {
        color: $hex;
      }
    }
  }
}

// Button block
.c-btn-block {
  display: block;
  width: 100%;
  text-align: center;
}


// Backwards compatible alias to c-btn-default
.c-btn-default {
  @extend .c-btn-secondary;
}