//--------- buttons ----------//
@mixin button-shadow($value) {
  box-shadow: 0 2px 6px 0 rgba($value, .5);
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-shadow($value);
  }
}

.btn-default {
  --btn-background-color: var(--bs-gray-100);
  --btn-default-bg-top: var(--bs-gray-100);
  --btn-default-bg-bottom: var(--bs-gray-200);
  --btn-border-color: rgba(var(--bs-body-color-rgb), 0.1);
  --btn-hover-border-color: rgba(var(--bs-body-color-rgb), 0.3);
  --btn-color: rgba(var(--bs-body-color-rgb), 0.85);
  --btn-hover-color: rgba(var(--bs-body-color-rgb), 1);
  --btn-focus-color: rgba(var(--bs-body-color-rgb), 1);
  --bs-btn-active-border-color: var(--primary-500);

  background-color: var(--btn-background-color);
  background-image: linear-gradient(to top, var(--btn-default-bg-top), var(--btn-default-bg-bottom));
  color: var(--btn-color);
  border: 1px solid var(--btn-border-color);
}

.btn-default:hover {
  border-color: var(--btn-hover-border-color);
  color: var(--btn-hover-color);
}

.btn-default:focus {
  border-color: rgba(var(--bs-body-color-rgb), 0.5) !important;
  color: var(--btn-focus-color);
}

.btn-default:active,
.ben-default.active {
  box-shadow: 0 2px 5px rgba(0,0,0,.15) inset !important;
}

.btn:not(.btn-system):active {
  box-shadow: 0 2px 5px rgba(0,0,0,.15) inset !important;
}

.btn-check:checked + .btn, 
:not(.btn-check) + .btn:active, 
.btn:first-child:active, 
.btn.active, 
.btn.show {
  color: var(--bs-btn-active-color) !important;
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
}

// Primary button
.btn-primary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: #{$color-primary};
  --bs-btn-border-color: #{$color-primary};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{darken($color-primary, 10%)};
  --bs-btn-hover-border-color: #{darken($color-primary, 15%)};
  --bs-btn-focus-shadow-rgb: #{red($color-primary)}, #{green($color-primary)}, #{blue($color-primary)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{darken($color-primary, 15%)};
  --bs-btn-active-border-color: #{darken($color-primary, 20%)};
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: #{$color-primary};
  --bs-btn-disabled-border-color: #{$color-primary};
}

// Success button
.btn-success {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: #{$color-success};
  --bs-btn-border-color: #{$color-success};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{darken($color-success, 10%)};
  --bs-btn-hover-border-color: #{darken($color-success, 15%)};
  --bs-btn-focus-shadow-rgb: #{red($color-success)}, #{green($color-success)}, #{blue($color-success)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{darken($color-success, 15%)};
  --bs-btn-active-border-color: #{darken($color-success, 20%)};
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: #{$color-success};
  --bs-btn-disabled-border-color: #{$color-success};
}

// Info button
.btn-info {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: #{$color-info};
  --bs-btn-border-color: #{$color-info};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{darken($color-info, 10%)};
  --bs-btn-hover-border-color: #{darken($color-info, 15%)};
  --bs-btn-focus-shadow-rgb: #{red($color-info)}, #{green($color-info)}, #{blue($color-info)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{darken($color-info, 15%)};
  --bs-btn-active-border-color: #{darken($color-info, 20%)};
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: #{$color-info};
  --bs-btn-disabled-border-color: #{$color-info};
}

// Warning button
.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #{$color-warning};
  --bs-btn-border-color: #{$color-warning};
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #{darken($color-warning, 10%)};
  --bs-btn-hover-border-color: #{darken($color-warning, 15%)};
  --bs-btn-focus-shadow-rgb: #{red($color-warning)}, #{green($color-warning)}, #{blue($color-warning)};
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #{darken($color-warning, 15%)};
  --bs-btn-active-border-color: #{darken($color-warning, 20%)};
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #{$color-warning};
  --bs-btn-disabled-border-color: #{$color-warning};
}

// Danger button
.btn-danger {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: #{$color-danger};
  --bs-btn-border-color: #{$color-danger};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{darken($color-danger, 10%)};
  --bs-btn-hover-border-color: #{darken($color-danger, 15%)};
  --bs-btn-focus-shadow-rgb: #{red($color-danger)}, #{green($color-danger)}, #{blue($color-danger)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{darken($color-danger, 15%)};
  --bs-btn-active-border-color: #{darken($color-danger, 20%)};
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: #{$color-danger};
  --bs-btn-disabled-border-color: #{$color-danger};
}

// Fusion button
.btn-fusion {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: #{$color-fusion};
  --bs-btn-border-color: #{$color-fusion};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{darken($color-fusion, 10%)};
  --bs-btn-hover-border-color: #{darken($color-fusion, 15%)};
  --bs-btn-focus-shadow-rgb: #{red($color-fusion)}, #{green($color-fusion)}, #{blue($color-fusion)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{darken($color-fusion, 15%)};
  --bs-btn-active-border-color: #{darken($color-fusion, 20%)};
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: #{$color-fusion};
  --bs-btn-disabled-border-color: #{$color-fusion};
}

// Outline buttons
.btn-outline-primary {
  --bs-btn-color: #{$color-primary};
  --bs-btn-border-color: #{$color-primary};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{$color-primary};
  --bs-btn-hover-border-color: #{$color-primary};
  --bs-btn-focus-shadow-rgb: #{red($color-primary)}, #{green($color-primary)}, #{blue($color-primary)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{$color-primary};
  --bs-btn-active-border-color: #{$color-primary};
  --bs-btn-disabled-color: #{$color-primary};
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #{$color-primary};
}

.btn-outline-success {
  --bs-btn-color: #{$color-success};
  --bs-btn-border-color: #{$color-success};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{$color-success};
  --bs-btn-hover-border-color: #{$color-success};
  --bs-btn-focus-shadow-rgb: #{red($color-success)}, #{green($color-success)}, #{blue($color-success)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{$color-success};
  --bs-btn-active-border-color: #{$color-success};
  --bs-btn-disabled-color: #{$color-success};
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #{$color-success};
}

.btn-outline-info {
  --bs-btn-color: #{$color-info};
  --bs-btn-border-color: #{$color-info};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{$color-info};
  --bs-btn-hover-border-color: #{$color-info};
  --bs-btn-focus-shadow-rgb: #{red($color-info)}, #{green($color-info)}, #{blue($color-info)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{$color-info};
  --bs-btn-active-border-color: #{$color-info};
  --bs-btn-disabled-color: #{$color-info};
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #{$color-info};
}

.btn-outline-warning {
  --bs-btn-color: #{$color-warning};
  --bs-btn-border-color: #{$color-warning};
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #{$color-warning};
  --bs-btn-hover-border-color: #{$color-warning};
  --bs-btn-focus-shadow-rgb: #{red($color-warning)}, #{green($color-warning)}, #{blue($color-warning)};
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #{$color-warning};
  --bs-btn-active-border-color: #{$color-warning};
  --bs-btn-disabled-color: #{$color-warning};
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #{$color-warning};
}

.btn-outline-danger {
  --bs-btn-color: #{$color-danger};
  --bs-btn-border-color: #{$color-danger};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{$color-danger};
  --bs-btn-hover-border-color: #{$color-danger};
  --bs-btn-focus-shadow-rgb: #{red($color-danger)}, #{green($color-danger)}, #{blue($color-danger)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{$color-danger};
  --bs-btn-active-border-color: #{$color-danger};
  --bs-btn-disabled-color: #{$color-danger};
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #{$color-danger};
}

.btn-outline-fusion {
  --bs-btn-color: #{$color-fusion};
  --bs-btn-border-color: #{$color-fusion};
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{$color-fusion};
  --bs-btn-hover-border-color: #{$color-fusion};
  --bs-btn-focus-shadow-rgb: #{red($color-fusion)}, #{green($color-fusion)}, #{blue($color-fusion)};
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #{$color-fusion};
  --bs-btn-active-border-color: #{$color-fusion};
  --bs-btn-disabled-color: #{$color-fusion};
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #{$color-fusion};
}

//header buttons
.btn-system {
  i {
    &::after {
      color: rgba(var(--info), 0.9);
    }
    &::before {	
      color: rgba(var(--primary), 0.9);
    }
  }

  &:hover,
  &.show {
    .sa-icon {
      fill: rgba(var(--primary), var(--sa-fill-opacity));
      stroke: rgba(var(--primary), 0.8);
    }

    &::before {
      background: rgba(var(--bs-emphasis-color-rgb), var(--btn-system-bg-opacity, 0.03));
    }
  }

  &.btn-system-light {
    &:hover,
    &.show {
      .sa-icon {
        fill: rgba(var(--white), var(--sa-fill-opacity));
        stroke: rgba(var(--white), 0.8);
      }

      &::before {
        background: rgba(var(--white), var(--sa-fill-opacity));
      }
    }		
  }
}

//play sound button
.btn[data-action="playsound"]:not(.btn-has-sound) {
  .sa-icon {
    stroke: rgb(34 36 38);
  }

  &:hover {
    .sa-icon {
      stroke: rgb(255 255 255);
    }
  }

  &[data-audio-playing] {
    border-color: rgba(var(--danger), 0.9);
    background: rgba(var(--danger), 0.1);

    .sa-icon {
      stroke: rgba(var(--danger), 0.9);
    }
  }
}

.btn-icon:not([class*=-primary]):not([class*=-secondary]):not([class*=-default]):not([class*=-success]):not([class*=-info]):not([class*=-warning]):not([class*=-danger]):not([class*=-dark]):not([class*=-light]):not(.nav-item):hover {
  background-color: rgba(var(--bs-body-color-rgb), .05);
  border-color: transparent;
}

.btn-icon:not([class*=-primary]):not([class*=-secondary]):not([class*=-default]):not([class*=-success]):not([class*=-info]):not([class*=-warning]):not([class*=-danger]):not([class*=-dark]):not([class*=-light]):not(.nav-item):not(.active):not(:active):not(:hover):not(:focus) {
  color: var(--bs-body-color);
}

.btn-icon:not([class*=-primary]):not([class*=-secondary]):not([class*=-default]):not([class*=-success]):not([class*=-info]):not([class*=-warning]):not([class*=-danger]):not([class*=-dark]):not([class*=-light]):not(.nav-item):focus {
  border-color: rgba(var(--bs-body-color-rgb), .1) !important;
}

.btn-outline-default {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  --bs-btn-active-border-color: var(--primary-500);
}

.btn-outline-default:hover,
.btn-outline-default:not(:disabled):not(.disabled).active,
.btn-outline-default:not(:disabled):not(.disabled):active,
.show>.btn-outline-default.dropdown-toggle {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

//grouped buttons
.btn-group .btn:not([class*=btn-outline-]):not(.btn-icon):not(.btn-light) {
  border-right: 1px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
}

.input-group-prepend .btn:not([class*=btn-outline-]):not(.btn-icon):not(:first-child) {
  border-left: 1px solid rgba(0,0,0,.1);
}

.input-group-append .btn:not([class*=btn-outline-]):not(.btn-icon):not(:first-child) {
  border-left: 1px solid rgba(0,0,0,.1);
}

.btn-group-vertical .btn-group,
.btn-group-vertical .btn:not([class*=btn-outline-]):not(:first-child) {
  border-top: 1px solid rgba(0,0,0,.1);
}

.input-group {
  .btn:not(.btn-outline-default) + .btn:not(.btn-outline-default) {
    border-left-color: rgba(0,0,0,.1);
  }
}