// Buttons
// *******************************************************************************

// condition needed as we using gray scale for disabled color
$base-color: if($dark-style, $base, $black) !default;

.btn {
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-transform: $btn-text-transform;
  letter-spacing: $btn-letter-spacing;

  // Disabled Style for all the button options as using gray color for all disabled buttons
  &[class*='btn-']:not([class*='btn-label-']):not([class*='btn-outline-']):not([class*='btn-text-']):not(.btn-icon) {
    // To add shadow for basic buttons only
    box-shadow: $btn-box-shadow;

    &:focus,
    &:active {
      box-shadow: $btn-active-box-shadow;
    }

    &:disabled,
    &.disabled {
      background: rgba-to-hex(rgba($base-color, 0.12), $rgba-to-hex-bg) !important;
      border-color: rgba-to-hex(rgba($base-color, 0.12), $rgba-to-hex-bg) !important;
      color: rgba-to-hex(rgba($base-color, 0.38), $rgba-to-hex-bg);
      box-shadow: none !important;
    }
  }
  &[class*='btn-label-'] {
    &:disabled,
    &.disabled {
      background: rgba-to-hex(rgba($base-color, 0.05), $rgba-to-hex-bg) !important;
      border-color: transparent !important;
      color: rgba-to-hex(rgba($base-color, 0.38), $rgba-to-hex-bg);
    }
  }
  &[class*='btn-outline-'] {
    &:disabled,
    &.disabled {
      background: transparent !important;
      border-color: rgba-to-hex(rgba($base-color, 0.12), $rgba-to-hex-bg);
      color: rgba-to-hex(rgba($base-color, 0.38), $rgba-to-hex-bg);
    }
  }
  &[class*='btn-text-'] {
    &:disabled,
    &.disabled {
      background: transparent !important;
      border-color: transparent !important;
      color: rgba-to-hex(rgba($base-color, 0.38), $rgba-to-hex-bg);
    }
  }

  // FAB Position
  &.btn-fab {
    box-shadow: $btn-fab-box-shadow;
    &:active {
      box-shadow: $btn-fab-active-box-shadow;
    }
    &:not(.demo) {
      position: fixed;
      bottom: 3rem;
      right: 1.5rem;
      margin: 0 !important;
      z-index: $zindex-notification;
    }
  }

  .bx {
    line-height: 1.15;
  }
  &.btn-text {
    background: none;
    box-shadow: none;
    border: none;
  }
  &.disabled,
  &:disabled {
    cursor: default;
  }
}

// Badge within button
.btn .badge {
  @include transition($btn-transition);
}

label.btn {
  margin-bottom: 0;
}

// Button Sizes

.btn-xl {
  @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $btn-font-size-xl, $btn-border-radius-xl);
}

.btn-sm {
  line-height: $line-height-sm;
}

.btn-xs {
  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);
  line-height: $line-height-xs;
}

// Buttons Variant

@each $color, $value in $theme-colors {
  @if $color != primary {
    @include template-button-variant('.btn-#{$color}', $value);
    @include template-button-label-variant('.btn-label-#{$color}', $value);
    @include template-button-text-variant('.btn-text-#{$color}', $value);
    @include template-button-outline-variant('.btn-outline-#{$color}', $value);
  }
}

// Icon button

.btn-icon {
  $btn-icon-size: ($btn-font-size * $btn-line-height) + ($btn-padding-y * 2);
  $btn-icon-size-xl: ($btn-font-size-xl * $btn-line-height-xl) + ($btn-padding-y-xl * 2);
  $btn-icon-size-lg: ($btn-font-size-lg * $btn-line-height-lg) + ($btn-padding-y-lg * 2);
  $btn-icon-size-sm: ($btn-font-size-sm * $btn-line-height-sm) + ($btn-padding-y-sm * 2);
  $btn-icon-size-xs: ($btn-font-size-xs * $btn-line-height-xs) + ($btn-padding-y-xs * 2);
  $borders-width: $btn-border-width * 2;
  --#{$prefix}btn-active-border-color: transparent;

  padding: 0;
  width: calc(#{$btn-icon-size} + #{$borders-width});
  height: calc(#{$btn-icon-size} + #{$borders-width});
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;

  &.btn-fab {
    width: calc(#{$btn-icon-size-lg} - #{$borders-width});
    height: calc(#{$btn-icon-size-lg} - #{$borders-width});
  }

  &.btn-xl {
    width: calc(#{$btn-icon-size-xl} + #{$borders-width});
    height: calc(#{$btn-icon-size-xl} + #{$borders-width});
    > span {
      font-size: $btn-font-size-xl;
    }
  }

  &.btn-lg {
    width: calc(#{$btn-icon-size-lg} + #{$borders-width});
    height: calc(#{$btn-icon-size-lg} + #{$borders-width});
    font-size: $btn-font-size-lg;
  }

  &.btn-sm {
    width: calc(#{$btn-icon-size-sm} + #{$borders-width});
    height: calc(#{$btn-icon-size-sm} + #{$borders-width});
    font-size: $btn-font-size-sm;
  }

  &.btn-xs {
    width: calc(#{$btn-icon-size-xs} + #{$borders-width});
    height: calc(#{$btn-icon-size-xs} + #{$borders-width});
    font-size: $btn-font-size-xs;
  }
}

// Without border

.btn.borderless {
  &:not(.active):not(:active):not(:hover):not(:focus),
  :not(.show) > &.dropdown-toggle:not(:hover):not(:focus) {
    border-color: transparent;
    box-shadow: none;
  }
}

// Link buttons
.btn.btn-link {
  font-size: inherit;
}

.btn-pinned {
  position: absolute;
  top: 0.75rem;
  @include ltr-style {
    right: 0.75rem;
  }
  @include rtl-style {
    left: 0.75rem;
  }
}

// Button focus
button:focus,
button:focus-visible {
  outline: none;
}

// Table Action Dropdown fix
.btn:not([class*='btn-']):active,
.btn:not([class*='btn-']).active,
.btn:not([class*='btn-']).show,
.btn:not([class*='btn-']) {
  border: none;
}