.btn {
  display: inline-flex;
  justify-content: start;
  align-items: center;
  font-size: $btn-font-size;
  height: $btn-height;
  transition: none;
  white-space: nowrap;
  line-height: 1.5;
  color: $primary;
  user-select: none;

  &:hover, &:focus, &:active {
    color: $white;
    background-color: $link-hover-color;
    border-color: $link-hover-color;
    border-style: solid;
    box-shadow: none;
    .icon {
      color: $white;
    }
  }
}

.btn-primary-inverted, 
.btn-inverted {
  background-color: $white;
  border-color: $white;
  color: $primary;

  .icon {
    color: $primary;
  }
}

.btn-outline-primary-inverted,
.btn-secondary-inverted {
  border-color: $white;
  color: $white;

  .icon {
    color: $white;
  }
}

.btn-primary-inverted,
.btn-inverted,
.btn-secondary-inverted,
.btn-outline-primary-inverted,
.btn-ghost-inverted {

  @include hover-focus {
    background-color: $link-hover-color;
    border-color: $link-hover-color;
    color: $white;

    .icon {
      color: $white;
    }
  }
}

.btn-primary {
  color: $white;
}

.btn-secondary {
  background-color: transparent;
  color: $primary;
}

.btn-info {
  color: $white;
}

.btn-ghost {
  border-color: transparent;
  background-color: transparent;
  color: $primary;
}

.btn-ghost-inverted {
  color: $white;
}

.btn-danger, 
.btn-warning {
  color: $white;
  border-color: $danger;
  background-color: $danger;
}

.btn-success {
  color: $white;
  background-color: $success;

  :hover {
    color: $white;
    background-color: $link-hover-color;
  }
}

.btn.btn-lg {
  height: $spacing-xxl;
  padding: 0;

  .icon {
    margin: 0;
  }
}

.btn-lg-wrapper {
  text-align: center;
  max-width: $spacing * 3;
}

.btn-lg-wrapper .btn-label {
  margin-top: $spacing-xs;
  font-size: $font-size-label;
  line-height: 1.2;
}


.btn-dashed {
  background-color: transparent;
  border: $border-width dashed;

  &.btn-info {
    color: $info;
    border: $border-width dashed $info;
  }

  &.btn-danger, &.btn-warning {
    color: $danger;
    border: $border-width dashed $danger;
  }
}

.btn.btn-xl {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: $btn-xl-height;
  height: $btn-xl-height;

  .icon {
    display: block;
    font-size: $font-size-icon-xl;
    height: $font-size-icon-xl;
    margin: $spacing-xs 0 $spacing-xs 0;
  }
}

.btn.btn-square {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: $btn-height;
  padding: 0;
  width: $btn-height;

  .icon {
    margin: 0;
  }
}

.btn-square.btn-sm {
  width: $spacing;
  height: $spacing;

  .icon {
    font-size: $font-size-icon-sm;
    height: $font-size-icon-sm;
  }
}

.btn-square.btn-lg {
  display: inline-flex;
  height: $spacing * 3;
  width: $spacing * 3;
}

.btn.disabled,
.btn:disabled,
.btn.unavailable {
    cursor: not-allowed;
    opacity: 1;
    background-color: $white;
    background-image: url("@images/pattern-stripes-gray.png");
    background-repeat: repeat;
    border-color: $gray-lighter;
    color: $gray-light;

    @include hover-focus {
      border-color: $gray-lighter;
      color: $gray-light;
      .icon {
        color: $gray-light;
      }
    }
}

.btn.disabled,
.btn:disabled,
.btn.unavailable {
    cursor: not-allowed;
    opacity: 1;
    background-color: transparent;
    background-image: url("@images/pattern-stripes-gray.png");
    background-repeat: repeat;
    border-color: $gray-lighter;
    color: $gray-light;

    @include hover-focus {
      border-color: $gray-lighter;
      color: $gray-light;
      .icon {
        color: $gray-light;
      }
    }
}

.btn-primary-inverted,
.btn-inverted,
.btn-secondary-inverted,
.btn-outline-primary-inverted,
.btn-ghost-inverted {
  &.disabled, &:disabled, &.unavailable {
    border-color: $gray-darker;
    color: $gray-darker;
    background-color: transparent;
    background-image: url("@images/pattern-stripes-gray-darker.png");
    .icon {
      color: $gray-darker;
    }
    @include hover-focus {
      border-color: $gray-darker;
      color: $gray-darker;
      .icon {
        color: $gray-darker;
      }
    }
  }
}

.btn-sm {
  height: $btn-sm-height;
  padding-right: $spacing-xs;
  padding-left: $spacing-xs;
}

.btn-xs {
  height: $btn-xs-height;
  padding-right: $spacing-xs;
  padding-left: $spacing-xs;
  .icon {
    font-size: $icon-xs;
    height: $icon-xs;
  }
  &.btn-square {
    width: $btn-xs-height;
    height: $btn-xs-height;
  }
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

.btn-intercom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $btn-height;
  height: $btn-height;
  border-radius: 50%;
  border: none;  
  background-color: $info;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .2);

  &:hover, &:focus {
    background-color: $link-hover-color;
    outline: none;
  }

  .icon-intercom::before {
    color: $white;
  }
}

.btn-purple {
  color: $white;
  background-color: $purple;
}

.collapse-btn {
  cursor: pointer;
}