@import './color';

$btn-font-weight: 600;
$btn-font-size: 16px;
$btn-line-height: 1.6;
$btn-border-width: 0.1rem;
$btn-border-radius: 0.3rem;
$btn-padding: 1.2rem 3.2rem;

.btn {
	border-radius: $btn-border-radius;
	font-family: 'NunitoFont', Fallback, sans-serif;
	font-size: $btn-font-size;
	font-weight: $btn-font-weight;
	line-height: $btn-line-height;
	padding: $btn-padding;
	white-space: nowrap;
	&.btn-primary {
		background: $aeap-color-primary;
		border-color: $aeap-color-primary;

		&:hover {
			background: $aeap-btn-primary-hover;
			border-color: $aeap-color-primary;
		}

		&:active {
			background: $aeap-color-bright-blue;
		}
	}

	&.btn-secondary,
	&.btn-primary-bgdark {
		background: $aeap-color-white;
		border-color: $aeap-color-primary;
		color: $aeap-color-primary;

		&:focus {
			background: $aeap-color-white;
			border-color: $aeap-color-primary;
			color: $aeap-color-primary;
		}

		&:hover {
			background: $aeap-btn-secondary-hover;
			border-color: $aeap-color-primary;
			color: $aeap-color-primary;
		}

		&:active {
			border-color: $aeap-color-bright-blue;
			color: $aeap-color-white;
		}

		&:disabled {
			opacity: 0.33;
		}

		&.disabled {
			opacity: 0.33;
		}
	}

	&.btn-default {
		background: $aeap-transparent;
		border-color: $aeap-transparent;
		color: $aeap-color-primary;
		&:hover {
			color: $aeap-color-primary;
		}

		&:active {
			color: $aeap-color-bright-blue;
		}
	}

	&.btn-secondary-bgdark {
		background: $aeap-transparent;
		border-color: $aeap-transparent;
		color: $aeap-color-white;
		&:hover {
			color: $aeap-color-white;
		}

		&:active {
			border-color: $aeap-transparent;
			color: $aeap-color-bright-blue;
		}
	}

	.btn-as-link,
	%btn-as-link {
		background: transparent;
		border: 0;
		cursor: pointer;
		outline: none;
	}

	.btn-cancel {
		@extend %btn-as-link;
		color: $aeap-link;
	}

	.btn-apply {
		@extend %btn-as-link;
		color: $aeap-active-link;
		&:focus {
			outline: none;
		}
	}

	&.btn-light {
		background: $aeap-color-white;
		border-color: $aeap-color-white;
		color: $aeap-color-primary;
	}

	&.btn-link-white {
		color: $aeap-color-white;
	}

	&.btn-disable {
		cursor: not-allowed;
		opacity: 0.33;
		pointer-events: none;
	}

	&.btn-transparent-primary-outline {
		background-color: transparent;
		border: 0.1rem solid $aeap-color-primary;
		color: $aeap-color-primary;
		outline: none;
		&:focus {
			outline: none;
		}
	}

	&.btn-cancel {
		@extend %btn-as-link;
		color: $aeap-link;
	}

	&.btn-apply {
		@extend %btn-as-link;
		color: $aeap-active-link;
	}

	&.btn-form-cancel {
		border: 0.1rem solid $aeap-color-grey;
		color: $aeap-color-grey;
		&:hover {
			color: $aeap-color-grey;
		}
	}

	&.btn-lg {
		padding-left: 3.2rem;
		padding-right: 3.2rem;
	}

	&.btn-tertiary {
		color: $aeap-color-primary;
		font-weight: 500;
		padding-left: 4rem;
		padding-right: 4rem;
	}
}

// multi.button.toast.component.scss  line 9*/
.multi-button {
	background-color: $aeap-color-white;
	color: $aeap-color-primary;
}

// rules.component.scss line 29 */
.btn-add {
	color: $aeap-toolbar-icon-active-color;
	width: 2.4rem;
}

button {
	&.fake-btn {
		background: none;
		border: 0;
		&:focus {
			outline: none;
		}
	}
}