/*
 * Sources:
 *  - mdb-ui-kit@6.4.2 (Material Design for Bootstrap) [MIT]
 *  - https://m3.material.io/components/floating-action-button/overview
 *  - https://m3.material.io/components/floating-action-button/specs
 *  - https://m3.material.io/components/floating-action-button/*
 *  - https://material-components.github.io/material-components-web-catalog/#/component/fab (shadows)
 */

$prefix: "bs" !default;

//
// Floating option
//
$custom-icon-class: "material-symbols-outlined" !default;
$btn-border-width: 0;

// From google material components v2
$btn-box-shadow:
	0 3px 5px -1px rgba(0, 0, 0, 0.2),
	0 6px 10px 0 rgba(0, 0, 0, 0.14),
	0 1px 18px 0 rgba(0, 0, 0, 0.12);
$btn-hover-box-shadow:
	0 5px 5px -3px rgba(0, 0, 0, 0.2),
	0 8px 10px 1px rgba(0, 0, 0, 0.14),
	0 3px 14px 2px rgba(0, 0, 0, 0.12);
$btn-focus-box-shadow:
	0 5px 5px -3px rgba(0, 0, 0, 0.2),
	0 8px 10px 1px rgba(0, 0, 0, 0.14),
	0 3px 14px 2px rgba(0, 0, 0, 0.12);
$btn-active-box-shadow:
	0 7px 8px -4px rgba(0, 0, 0, 0.2),
	0 12px 17px 2px rgba(0, 0, 0, 0.14),
	0 5px 22px 4px rgba(0, 0, 0, 0.12);

$btn-floating-size: 56px !default;
$btn-floating-border-radius: 16px !default;
$btn-floating-icon-size: $btn-floating-size !default; // 24px
$btn-floating-icon-line-height: 1 !default;

$btn-floating-size-sm: 40px !default;
$btn-floating-border-radius-sm: 12px !default;
$btn-floating-icon-size-sm: $btn-floating-size-sm !default; // 24px

$fixed-action-btn-gap: 16px !default;
$fixed-action-button-zindex: 100 !default;
$fixed-action-btn-padding: 0px !default; // ???
$fixed-action-btn-li-margin-bottom: 16px !default; // ???

.btn-floating,
[class*="btn-outline-"].btn-floating {
	--#{$prefix}btn-border-radius: #{$btn-floating-border-radius};
	--#{$prefix}btn-border-radius-sm: #{$btn-floating-border-radius-sm};
	--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
	--#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
	--#{$prefix}btn-focus-box-shadow: #{$btn-focus-box-shadow};
	--#{$prefix}btn-active-box-shadow: #{$btn-active-box-shadow};

	border: $btn-border-width;
	box-shadow: var(--#{$prefix}btn-box-shadow);
	border-radius: var(--#{$prefix}btn-border-radius);
	padding: 0;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	:not(.btn-check) + &:hover,
	&:first-child:hover,
	&:focus-visible,
	&:hover {
		box-shadow: var(--#{$prefix}btn-hover-box-shadow);
	}

	.btn-check:focus-visible + &,
	.btn-check:focus + &,
	&:focus {
		box-shadow: var(--#{$prefix}btn-focus-box-shadow);
	}

	.btn-check:checked + &,
	.btn-check:active + &,
	&:active,
	&.active,
	&.show {
		box-shadow: var(--#{$prefix}btn-active-box-shadow);

		&:focus {
			box-shadow: var(--#{$prefix}btn-focus-box-shadow);
		}
	}

	&:disabled,
	&.disabled,
	fieldset:disabled & {
		box-shadow: var(--#{$prefix}btn-box-shadow);
	}
}

.btn-floating {
	--#{$prefix}btn-size: #{$btn-floating-size};
	--#{$prefix}btn-icon-line-height: #{$btn-floating-icon-line-height};
	--#{$prefix}btn-size-sm: #{$btn-floating-size-sm};
	--#{$prefix}btn-icon-size-sm: #{$btn-floating-icon-size-sm};

	width: var(--#{$prefix}btn-size);
	height: var(--#{$prefix}btn-size);

	.#{$custom-icon-class},
	.fas,
	.far,
	.fab {
		width: var(--#{$prefix}btn-icon-width);
		line-height: var(--#{$prefix}btn-icon-line-height);
	}

	&.btn-sm {
		width: var(--#{$prefix}btn-size-sm);
		height: var(--#{$prefix}btn-size-sm);
		border-radius: var(--#{$prefix}btn-border-radius-sm);

		.#{$custom-icon-class},
		.fas,
		.far,
		.fab {
			width: var(--#{$prefix}btn-icon-size-sm);
		}
	}
}

//
// Fixed option
//

.fixed-action-btn {
	--#{$prefix}btn-gap: #{$fixed-action-btn-gap};
	--#{$prefix}btn-zindex: #{$fixed-action-button-zindex};
	--#{$prefix}btn-padding: #{$fixed-action-btn-padding};
	--#{$prefix}btn-margin-bottom: #{$fixed-action-btn-li-margin-bottom};

	position: fixed;
	right: var(--#{$prefix}btn-gap);
	bottom: var(--#{$prefix}btn-gap);
	z-index: var(--#{$prefix}btn-zindex);
	display: flex;
	flex-flow: column-reverse nowrap;
	align-items: center;
	padding: var(--#{$prefix}btn-padding);
	margin-bottom: 0;
	height: auto;
	overflow: visible; // show shadows of children

	@media (pointer: fine) {
		opacity: 0 !important;
		display: none !important;
	}

	& > .btn-floating {
		position: relative;
		z-index: 10;
	}

	ul {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		padding: 0;
		margin: 0;
		margin-bottom: 0;
		text-align: center;
		opacity: 1;
		transition:
			transform 0.4s,
			opacity 0.4s;
		z-index: -1;

		@media (pointer: coarse) {
			opacity: 1 !important;
		}

		li {
			z-index: 0;
			display: flex;
			margin-right: auto;
			margin-bottom: var(--#{$prefix}btn-margin-bottom);
			margin-left: auto;

			&:first-of-type {
				margin-top: calc(var(--#{$prefix}btn-margin-bottom) * 0.5);
			}
			&:last-of-type {
				margin-bottom: 80px;
			}
		}

		// a {
		// 	&.btn {
		// 		opacity: 0;
		// 		transition: opacity 0.4s ease-in;

		// 		@media (pointer: coarse) {
		// 			opacity: 1 !important;
		// 		}

		// 		&.shown {
		// 			opacity: 1;
		// 		}
		// 	}
		// }
	}

	// & ul {
	// 	opacity: 1;
	// }
}
