/* Styles buttons */

.btn { 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	gap: 8px; 
	padding: 10px 18px; 
	border: none; 
	border-radius: 8px; 
	cursor: pointer; 
	font-weight: 600; 
	transition: all 0.2s; 
}
.btn-primary {
	background-color: var(--primary); 
	color: var(--btn-text-primary); 
	box-shadow: 0 2px 4px color-mix(in srgb, var(--primary) 40%, transparent); 
}
.btn-primary:hover {
	background-color: var(--primary-hover); 
	transform: translateY(-1px);
}
.btn-success {
	background-color: var(--success); 
	color: var(--btn-text-success);
}
.btn-danger {
	background-color: var(--danger);
	color: var(--btn-text-danger); 
}
.btn-warning {
	background-color: var(--warning);
	color: var(--btn-text-warning);
}
.btn-outline {
	background-color: transparent; 
	border: 2px solid var(--border-color); 
	color: var(--text-color);
}
.btn-outline:hover { 
	background-color: var(--gray-light); 
	border-color: var(--gray-dark);
}


/* Styles icons buttons */

.btn-icon {
	width: 36px; 
	height: 36px; 
	border-radius: 8px; 
	flex-shrink: 0; 
	background: var(--gray-light); 
	color: var(--text-color); 
	border: none; 
	cursor: pointer; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	padding: 0; 
	transition: all 0.2s;
}
.btn-icon:hover {
	background-color: var(--primary); 
	color: var(--btn-text-primary);
}
.btn-icon.active { 
	background-color: var(--primary); 
	color: var(--btn-text-primary); 
	box-shadow: 0 0 8px var(--primary); 
}
.btn-icon-danger:hover {
	background-color: var(--danger); 
	color: var(--btn-text-danger);
}
.btn-icon-warning:hover {
	background-color: var(--warning); 
	color: var(--btn-text-warning);
}
.btn-icon-success:hover {
	background-color: var(--success);
	color: var(--btn-text-success);
}
.btn-icon:disabled { 
	opacity: 0.3; 
	cursor: not-allowed;
}