/* =========================================================================== */

.btn {
	display:			flex;
	gap:				8px;
	align-items:		center;
	width:				100%;
	max-width:			200px;
	height:				20px;
	padding:			8px 10px 8px 8px;
	font-family:		sans-serif;
	font-size:			16px;
	color:				#fff;
	text-align:			center;
	overflow-wrap:		anywhere;
	background-color:	#344868;
	border-radius:		10px;
}

.btn_icon {
	display:			flex;
	flex-shrink:		0;
	align-items:		center;
	justify-content:	center;
	width:				16px;
	aspect-ratio:		1;
	padding:			4px;
	overflow:			hidden;
	border-radius:		50%;
}

.btn_text {
	flex-shrink:		1;
	width:				100%;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media (any-hover: hover) {
	.btn {
		transition:			background-color 0.2s;
	}

	.btn_icon_item {
		transition:			background-color 0.2s;
	}

	.btn:hover {
		background-color:	#4E6B9B;
	}
}

@media only screen and (max-width: 767px) {
	.btn {
		width:				50%;
	}

	.btn_text {
		display:			none;
	}
}

/* =========================================================================== */