.wig-button {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  margin: rem-calc(16) rem-calc(8);
  user-select: none;
  min-height: 54px;
  cursor: pointer;
  &--bold {
    font-weight: $button-font-weight;
  }
  &--no-min-height {
    min-height: initial;
  }
  &--no-margin {
    margin: 0;
  }
  &--margin {
    margin: rem-calc(10 0);
  }
  &--margin-sides {
    margin-right: rem-calc(10);
    margin-left: rem-calc(10);
  }
  &--extra-padding {
    padding: rem-calc(12 32);
  }
  &--no-padding {
    padding: 0;
  }
  &--normal-padding {
    padding: rem-calc(0 16);
  }
  &--full {
    width: 100%;
    margin: 0;
  }
  &--mini-curved {
    border-radius: $button-small-radius;
  }
  &--semi-rounded {
    border-radius: $button-medium-radius;
  }
  &--circle {
    border-radius: 100%;
  }
  &--square {
    border-radius: 0;
  }
  &--gray {
    @include theme-color-with-hover($textcolor: $white, $bg-color: $gray);
  }
  &--attention {
    box-shadow: 0 2px 7px 0 rgba(120, 137, 149, 0.26);
    @include theme-color-with-hover( $textcolor: $black, $bg-color: $attention-color);
  }
  &--link-style {
    padding: 0;
    background-color: transparent;
    text-transform: uppercase;
    &-primary,
    &:active,
    &:focus {
      @extend .wig-button--link-style;
      @extend .wig-link--primary-simple;
      &:hover {
        background-color: transparent !important;
        @extend %hover-simple-primary;
      }
    }
    &-danger {
      @extend .wig-button--link-style;
      @extend .wig-link--danger-simple;
      &:hover {
        @extend %hover-simple-danger;
      }
    }
  }
  &--primary {
    box-shadow: 0 2px 7px 0 rgba(120, 137, 149, 0.26);
    @include theme-color-with-hover( $textcolor: $white, $bg-color: $primary-color);
  }
  &--secondary {
    border: solid 1px #c8cfd8;
    box-shadow: 0 1px 0 0 #cfd8e1, inset 0 0 0 0 $white;
    @include theme-color-with-hover( $textcolor: $primary-light-color, $bg-color: $secondary-color, $bg-hover-color: #cfd8e1);
    border-radius: 3px;
  }
  &--danger {
    @include theme-color-with-hover( $textcolor: $white, $bg-color: $alert-color);
  }
  &--warning {
    @include theme-color-with-hover( $textcolor: $white, $bg-color: $warning-color);
  }
  &--success {
    @include theme-color-with-hover( $textcolor: $white, $bg-color: $success-color);
  }
  &--transparent {
    @include theme-color-with-hover( $textcolor: $gray, $bg-color: $transparent, $text-hover-color: $white, $bg-hover-color: $gray);
  }
  &--white {
    @extend .wig-button--transparent;
    border: solid 1px $gray-border-color;
  }
  &--transparent-with-border {
    border: 1px solid $gray-border-color;
    background-color: transparent;
  }
  &--transparent-delete {
    border: none;
    background-color: transparent;
    color: $alert-color;
    box-shadow: none;
    margin: 0;
    padding: .2rem .3rem;
    font-size: rem-calc(14);
  }
  &--transparent-delete:hover {
    border: none;
    background-color: transparent;
    color: $alert-color;
  }
  &--light-gray {
    @include theme-color-with-hover( $textcolor: $black, $bg-color: $light-gray, $text-hover-color: $white, $bg-hover-color: $gray);
  }
  &--still-gray {
    @include theme-color-with-hover( $textcolor: $gray, $bg-color: $transparent, $text-hover-color: smart-scale($black, -15%), $bg-hover-color: $transparent);
  }
  &--uppercase {
    text-transform: uppercase;
  }
  &--lowercase {
    text-transform: initial;
  }
  &--capitalize {
    text-transform: capitalize;
  }
  &--disabled {
    cursor: not-allowed;
    @include theme-color-with-hover( $textcolor: $white, $bg-color: $input-background-disabled, $text-hover-color: $white, $bg-hover-color: $input-background-disabled);
  }
  &--bordered {
    border: rem-calc(1) solid $gray;
  }
  @each $name,
  $dictionary in $icon {
    &--dripicon-#{$name}:before {
      font-size: map-get($dictionary, "font-size");
      display: inline-block;
      vertical-align: middle;
    }
    &--dripicon-#{$name}:before {
      margin-right: 8px;
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.wig-button-icon {
  cursor: pointer;
  outline: none;
  &--mini-curved {
    @extend .wig-button--mini-curved;
  }
  &--square {
    @extend .wig-button--square;
  }
  &--circle {
    @extend .wig-button--circle;
  }
  &--light-gray {
    @extend .wig-button--light-gray;
  }
  &--gray {
    @extend .wig-button--gray;
  }
  &--primary {
    @extend .wig-button--primary;
  }
  &--secondary {
    @extend .wig-button--secondary;
  }
  &--transparent {
    @extend .wig-button--transparent;
  }
  &--still-gray {
    @extend .wig-button--still-gray;
  }
  &--danger {
    @extend .wig-button--danger;
  }
  &--warning {
    @extend .wig-button--warning;
  }
  &--success {
    @extend .wig-button--success;
  }
  @each $name,
  $dictionary in $button-icon {
    &--#{$name} {
      @each $property,
      $value in $dictionary {
        #{$property}: $value
      }
      &:before {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &.wig-button-icon--semiRounded {
        border-radius: (map-get($map: $dictionary, $key: width)/4);
      }
    }
  }
  &--with-label {
    @extend .grid-x,
    .align-middle;
    .wig-button-icon__wrapper {
      @extend .cell,
      .shrink;
      margin-right: $button-icon-with-label-icon-margin;
    }
    .wig-button-icon__label {
      @extend .cell,
      .auto;
    }
    &-small {
      padding: $button-padding-small;
      font-size: $button-font-small-size;
    }
    &-medium {
      padding: $button-padding-medium;
      font-size: $button-font-medium-size;
    }
    &-large {
      padding: $button-padding-large;
      font-size: $button-font-large-size;
    }
  }
  &__label-spaced {
    margin-left: 5px;
  }
  &--disabled {
    cursor: not-allowed;
    @extend .wig-button--disabled;
  }
  &__wrapper {
    @extend .grid-x,
    .align-center,
    .align-middle;
  }
}

.wig-button-counter {
  position: relative;
  margin: $button-counter-margin;
  &__number {
    position: absolute;
    top: ($button-counter-number-size / 2);
    right: ($button-counter-padding-right);
    color: $white;
    background: $button-counter-color;
    padding: $button-counter-padding;
    font-size: $button-counter-number-size;
    min-width: $button-counter-number-width;
    font-weight: $button-font-weight;
    border-radius: $button-small-radius;
  }
  .dripicons-conversation {
    font-size: rem-calc(40);
  }
}

.wig-button-letter {
  @extend .grid-x,
  .align-middle,
  .align-center;
  @include box($button-letter-size);
  font-size: $button-letter-font-size;
  padding: 0;
}

.wig-button-image {
  display: inline-block;
  box-shadow: 0 2px 7px 0 rgba(120, 137, 149, 0.26);
  border-radius: 5px;
  padding: 4px;
  touch-action: manipulation;
  &__img {
    @include box(rem-calc($img-button-size));
    border-radius: $img-button-radius;
    object-fit: cover;
    cursor: pointer;
    &--thumbnail {
      @extend .thumbnail;
      @include box(rem-calc($img-button-thumbnail-size));
      &:hover {
        border-color: scale-color($color: $primary-color, $lightness: 75%)
      }
    }
  }
  &--disabled {
    cursor: not-allowed;
    position: relative;
    &:before {
      content: "";
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
  &--no-shadow {
    box-shadow: none
  }
}