@use 'sass:list';

.btn {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	color: $text-color;
	text-decoration: none;
	text-align: center;
	background-color: $co-gray-80;
	border: 1px solid transparent;
	font-weight: $font-bold;
	border-radius: 2.6rem;


	@include bitSize();


	&.is-active {
		background-color: darken($co-gray-80, 3%);
	}

	&:hover {
		text-decoration: none;
		background-color: lighten($co-gray-80, 3%);
	}

	[data-bs-toggle="tooltip"] {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		inset: 0;
	}
}

@each $suf, $color in $co-btns {
	$light: lightness(list.nth($color, 1));
	$bg: list.nth($color, 1);
	$text: list.nth($color, 2);

	.btn-#{$suf} {
		color: $text;
		background-color: $bg;
		&.is-active {
			color: $text;
			background-color: if($light < 80%, actionDarken($bg), actionLighten($bg));
		}

		&:focus {
			color: $text;
		}

		&:hover {
			color: $text;
			background-color: if($light < 80%, actionLighten($bg), actionDarken($bg));
		}
	}
}

.btn-base-1 {
	background-color: $co-base-1;

	@include hover() {
		background-color: darken($co-base-1, 3%);
	}
}

.btn.has-outline {
	&:hover {
		opacity: .70;
	}
}

.btn-multiselect {
	display: block;
	width: 100%;
	justify-content: start;
	height: 5.6rem;
	max-height: 5.6rem;
	text-overflow: ellipsis;
	overflow: hidden;
	border-radius: 0;
	border: 1px solid $co-gray-70;
	background-color: $co-base-1;
	background-repeat: no-repeat;
	background-position: right $sp-1 center;
	background-size: 16px 12px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23555555' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

	&:hover {
		background-color: $co-base-1;
	}

	&[aria-expanded="true"],
	&:focus-visible {
		outline: 0;
		border-color: $co-alpha;
		box-shadow: none;
	}

	.is-label {
		position: absolute;
		top: .4rem;
		left: $sp-4;
		font-size: $font-size-small;
	}

	.is-selected {
		position: relative;
		top: .8rem;
	}
}

.btn-cookie-consent {
	display: none;
	position: fixed;
	bottom: $sp-4;
	left: $sp-4;
	z-index: $z-index-modal - 1;
	box-shadow: $shadow-md-v;
}

.btn-arrow-right {
	&:after {
		content: ".";
		display: inline-block;
		vertical-align: middle;
		width: 1em;
		height: 1em;
		margin-left: .5em;
		background-color: currentColor; // color of the icon
		// -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") no-repeat center;
		// mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") no-repeat center;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM297 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L120 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l214.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L409 239c9.4 9.4 9.4 24.6 0 33.9L297 385z'/%3E%3C/svg%3E") no-repeat center;
 	    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM297 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L120 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l214.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L409 239c9.4 9.4 9.4 24.6 0 33.9L297 385z'/%3E%3C/svg%3E") no-repeat center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
}

.btn-go-top {
	position: fixed;
	bottom: $sp-4;
	right: $sp-4;
	z-index: $z-index-chat - 1;
	padding: $sp-2 $sp-4;
	color: $co-gray-40;
	font-size: 1.2rem;
	background-color: rgba($co-gray-80, .8);
	transform: rotate(-90deg) translateX(100%);
	transform-origin: 100% 100%;
	border: 1px solid;
	border-radius: $border-radius-4;
	opacity: 0;
	transition: all .3s ease-in-out;

	body.scrolled-xs-top & {
		opacity: 1;
	}

	.chat ~ & {
		bottom: 8rem;
		right: 2.5rem;
	}
}

// bootstrap for modal, ...
.btn-close {
    width: $sp-6;
    height: $sp-6;
	color: $co-base-1;
	text-align: center;
	text-decoration: none;
	// opacity: 1;
	// background-color: #faa;

	&:after {
		content:"✖";
		font-size: 1.5rem;
		font-family: $font-family-monospace;
	}

	@include hover() {
		color: $co-base-1;
		opacity: .7;
	}
}

@include mediaQ(sm) {
	.btn-go-top.btn {
		right: $sp-1;
		bottom: $sp-6;
	}
}