//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);
	}
  }

//


/* parent position needs to be relative, and turn off waves function */
.btn-icon .badge {
	top: auto;
	&.pos-top {
		margin-top: -0.25rem; //4px
	}
	&.pos-bottom {
		margin-bottom: -0.25rem; //4px
	}
	&.pos-left {
		margin-left: -0.25rem; //4px
	}
	&.pos-right {
		margin-right: -0.25rem; //4px
	}
}  

.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-disabled-border-color: #dddddd;
	--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);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-default:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: var(--btn-hover-border-color);
    color: var(--btn-hover-color);
    //z-index: 2;
}

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

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

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


// .active.btn-default {
//     background: var(--info-400);
//     color: var(--bs-white);
//     -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset !important;
//     box-shadow: 0 2px 5px rgba(0, 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 {
	font-size: 1.5rem;
    padding: 0.3125rem; // 5px
    line-height: var(--app-header-height);
	border: none;
	outline: none;
	cursor: default;
	position: relative;

	i {
		width: 2rem; //32px
		height: 2rem; //32px
		display: flex;
		align-items: center;
		justify-content: center;

		&::after {
			color: rgba(var(--info), 0.9);
			opacity: 0.4;
		}
		&::before {	
			color: rgba(var(--primary), 0.9);
		}
	}

	&::before {
		content: "";
		position: absolute;
		width: 2.875rem; //46	px
		height: 2.875rem; //46px
		border-radius: 50%;
		background: transparent;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	&:focus {
		border: none;
		outline: none;
	}

	&:hover,
	&.show {
		border: none;
		outline: none;

		.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 {
			border: none;
			outline: none;
	
			.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));
			}
			
		}		
	}

	&:active {
		scale: 0.9;
	}	
	
}

//play sound button
.btn[data-action="playsound"]:not(.btn-has-sound) {
	padding: 0 2px;
	position: relative;

	.sa-icon {
		width: 1rem; //16px
		height: 1rem; //16px
		stroke: rgb(34 36 38);
		stroke-width: 1px;
	}

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

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

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

	//larger hit area
	&::before {
		content: "";
		position: absolute;
		width: 3.125rem; //50px
		height: 3.125rem; //50px
		border-radius: 50%;
		background: transparent;
		top: calc((1.125rem - 3.125rem)/2);
		left: calc((1.375rem - 3.125rem)/2);
	}
}



//
.btn-icon {
    width: calc(2.1rem + 2px);
	height: calc(2.1rem + 2px);
    padding: 0;
    //line-height: 2.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

// was there a reason why we hardcoded the 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):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) {
	background: 0 0;
	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-icon.btn-xs {
    width: calc(1.15rem + 2px);
	height: calc(1.15rem + 2px);
    //line-height: 1.15rem;
	padding: 0;
}

.btn-icon.btn-sm {
    width: calc(1.5rem + 2px);
	height: calc(1.5rem + 2px);
    //line-height: 1.5rem
}

.btn-icon.btn-lg {
    width: calc(3rem + 2px);
	height: calc(3rem + 2px);
    //line-height: 3rem
}

.btn-group-xs>.btn, 
.btn-xs {
	padding: 0.25rem 0.5rem;
    font-size: .7rem;
    line-height: 1.5;
    border-radius: .25rem;
}

.btn-pills {
    border-radius: 0.9375rem; //15px
}

.btn-outline-default {
    background-color: transparent;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
	--bs-btn-active-border-color: var(--primary-500);
	--bs-btn-disabled-border-color: #dddddd;
}

.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);
	}
	
}

// Custom btn-block class
.btn-block {
    display: block;
    width: 100%;

    // These are to maintain spacing between multiple block buttons
    + .btn-block {
        margin-top: 0.5rem;
    }
}


//
// button:disabled {
//     background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3)) !important;
//     color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3)) !important;
//     border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3)) !important;
//     box-shadow: 0 2px 6px 0 rgba(255, 255, 255, 0.3) !important;
// }