.bgl_btn,
.bgl_flatBtn,
.bgl_btn-icon {
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
	user-select: none;
	border: none;
	transition: var(--bgl-transition);
	border-radius: var(--btn-border-radius);
	line-height: var(--btn-height);
	font-size: var(--input-font-size);
	display: inline-block;
	height: var(--btn-height);
	padding: 0;
}

.btn-close {
	margin-top: -20px;
	margin-inline-end: -20px;
	margin-inline-start: auto;
	margin-bottom: 15px;
	transition: var(--bgl-transition);
	height: 30px;
	width: 30px;
	opacity: 0.6;
	cursor: pointer;
	border-radius: 100%;
	outline: 2px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-close:hover {
	background: var(--bgl-gray-light);
	opacity: 1;
}

.btn-close:active {
	background: var(--bgl-gray);
}

.btn-close::before {
	content: 'close';
	font-family: 'Material Symbols Outlined', serif;
}

.bgl_btn.thin {
	height: calc(var(--btn-height) * 0.7);
	line-height: calc(var(--btn-height) * 0.7);
}

.hover {
	cursor: pointer;
	transition: all 400ms ease;
}

.hover:hover {
	filter: brightness(90%);
}

.hover:active {
	filter: brightness(80%);
}

.border {
	border: 1px solid var(--border-color);
}

.border-primary {
	border: 1px solid var(--bgl-primary);
}

.outline {
	outline: 1px solid var(--border-color);
}

.outline-dashed {
	outline: 2px dashed var(--border-color);
}

.outline-primary {
	outline: 1px solid var(--bgl-primary);
}

.rotate-270 {
	transform: rotate(270deg);
}

.rotate-180 {
	transform: rotate(180deg);
}

.rotate-90 {
	transform: rotate(90deg);
}

.rotate-0 {
	transform: rotate(0deg) !important;
}

@media screen and (max-width: 910px) {
	.bgl_btn {
		padding: 0 20px;
	}

	.m_border {
		border: 1px solid var(--border-color);
	}

	.m_rotate-270 {
		transform: rotate(270deg);
	}

	.m_rotate-180 {
		transform: rotate(180deg);
	}

	.m_rotate-90 {
		transform: rotate(90deg);
	}

	.m_rotate-0 {
		transform: rotate(0deg) !important;
	}
}

.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
	animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
	to {
		transform: scale(4);
		opacity: 0;
	}
}
