/* Default state */
.btn-default {
	display: block;
	outline: 0;
	border: 0;
	cursor: pointer;
	background-color: var( --primary-bg-color-1-90 );
	border-radius: 12px;
	border: 2px solid var(--primary-fg-color-1-50);
	border-bottom: 5px solid var(--primary-fg-color-1-50);
	padding: 8px 16px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

/* Hover state */
.btn-default:hover { 
	background-color: var( --primary-bg-color-1-80 );
}

.btn-default:active{
	border: 3px solid var( --primary-fg-color-1-50 );
	margin-top: 2px;
	margin-bottom: -2px;
}

.btn-default:focus {
	outline: auto;
}

/* Disabled state */
.btn-default:disabled, .btn-default.disabled {
	opacity: 0.5;
}

/* Primary button */
.btn-primary {
	display: block;
	outline: 0;
	border: 0;
	cursor: pointer;
	background-color: var( --accent-fg-color-1-100 );
	border-radius: 12px;
	border: 2px solid var(--accent-bg-color-1-100);
	border-bottom: 5px solid var(--accent-bg-color-1-100);
	padding: 8px 16px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.btn-primary:hover {
	background-color: var( --accent-fg-color-1-90 );
}

.btn-primary:active{
	border: 3px solid #000;
	margin-top: 2px;
	margin-bottom: -2px;
}

.btn-primary:focus {
	outline: auto;
}

.btn-primary:disabled {
	opacity: 0.5;
}


/* Success button */
.btn-success {
	display: block;
	outline: 0;
	border: 0;
	cursor: pointer;
	background-color: var( --success-bg-color-1-10 );
	border-radius: 12px;
	border: 2px solid var(--success-bg-color-1-100);
	border-bottom: 5px solid var(--success-bg-color-1-100);
	padding: 8px 16px;
	font-size: 16px;
	font-weight: 700;
	color: var( --primary-fg-color-1-10 );
	text-align: center;
}

.btn-success:hover {
	background-color: var( --success-bg-color-1-30 );
}

.btn-success:active{
	border: 3px solid #000;
	margin-top: 2px;
	margin-bottom: -2px;
}

.btn-success:focus {
	outline: auto;
}

.btn-success:disabled {
	opacity: 0.5;
}


/* Delete button */
.btn-delete {
	display: block;
	outline: 0;
	border: 0;
	cursor: pointer;
	background-color: var( --error-bg-color-1-10 );
	border-radius: 12px;
	border: 2px solid var(--error-bg-color-1-100);
	border-bottom: 5px solid var(--error-bg-color-1-100);
	padding: 8px 16px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-align: center;
}

.btn-delete:hover {
	background-color: var( --error-bg-color-1-30 );
}

.btn-delete:active{
	border: 3px solid #000;
	margin-top: 2px;
	margin-bottom: -2px;
}

.btn-delete:focus {
	outline: auto;
}

.btn-delete:disabled {
	opacity: 0.5;
}

.btn-link{
	all: unset;
	border: unset;
	padding: unset;
	background:unset;
	box-sizing: border-box;
	cursor: pointer;
	color: var( --primary-fg-color-1-100 );
	border: 0;
	font-size: 1em;
	text-decoration: underline;
}
.btn-link:focus {
	outline: auto;
}