.btn,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	@include btn-size($height__input, 35px, 16px);
	@include btn-variant(var(--g5-color-accent-foreground), var(--g5-color-accent), var(--g5-color-accent),var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary));

	position: relative;
	display: inline-block;
	font-family: var(--g5-btn-font-family);
	padding: var(--g5-btn-padding-y) var(--g5-btn-padding-x);
	line-height: var(--g5-btn-line-height);
	font-size: var(--g5-btn-font-size);
	font-weight: var(--g5-btn-font-weight);
	border: var(--g5-btn-border-width) solid var(--g5-btn-border-color);
	white-space: nowrap;
	@include border-radius(var(--g5-btn-border-radius));
	@include transition(color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);
	text-transform: capitalize;
	color: var(--g5-btn-color);
	background-color: var(--g5-btn-bg);


	&:focus,
	&:hover,
	&:active {
		color: var(--g5-btn-hover-color);
		background-color: var(--g5-btn-hover-bg);
		border-color: var(--g5-btn-hover-border-color);
	}

	&.btn-outline {
		color: var(--g5-btn-outline-color);
		background-color: transparent;
		&:focus,
		&:hover,
		&:active {
			background-color: var(--g5-btn-outline-hover-bg);
			color: var(--g5-btn-outline-hover-color);
			border-color: var(--g5-btn-outline-border-hover-color);
		}
	}

	&:hover {
		cursor: pointer;
	}

	&:focus {
		outline: none;
		@include box-shadow(none);
	}

	&:disabled {
		opacity: var(--g5-btn-disabled-opacity);
		cursor: default;
	}

}

.btn {
	&.btn-block,
	&.btn-full {
		display: block;
		width: 100%;
	}
	&.btn-inline {
		display: inline-block;
		vertical-align: top;
	}

	// Button style
	&.btn-round {
		--g5-btn-border-radius: 5em;
	}
	&.btn-rounded {
		--g5-btn-border-radius: 0.25rem;
	}
	&.btn-square {
		--g5-btn-border-radius: 0;
	}

	&.btn-xs {
		@include btn-size(30px, 20px, 11px);
	}

	&.btn-sm {
		@include btn-size(32px, 25px, 12px);
	}
	&.btn-md {
		@include btn-size($height__input, 35px, 16px);
	}
	&.btn-lg {
		@include btn-size(52px, 30px, 18px);
	}
	&.btn-xl {
		@include btn-size(62px, 35px, 24px);
	}


	&.btn-link {
		--g5-btn-border-radius: 0;
		--g5-btn-link-color: var(--g5-color-dark);
		background-color: transparent !important;
		border-left-width: 0;
		border-right-width: 0;
		border-top-width: 0;
		text-decoration: none;
		padding: 0;
		color: var(--g5-btn-link-color);
		line-height: 1.3;
		border-bottom: 1px solid transparent;
		&:focus,
		&:hover,
		&:active {
			border-color: currentColor;
		}
	}
	&.btn-link:not(:disabled):not(.disabled):active {
		color: initial;
		&:focus {
			@include box-shadow(none);
		}
	}


	// Button color
	&.btn-primary {
		@include btn-variant(var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary),var(--g5-color-accent-foreground), var(--g5-color-accent), var(--g5-color-accent));
	}

	&.btn-secondary {
		@include btn-variant(var(--g5-color-secondary-foreground), var(--g5-color-secondary), var(--g5-color-secondary),var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary));
	}

	&.btn-light {
		@include btn-variant(var(--g5-color-light-foreground), var(--g5-color-light), var(--g5-color-light),var(--g5-color-dark-foreground), var(--g5-color-dark), var(--g5-color-dark));
	}

	&.btn-dark {
		@include btn-variant(var(--g5-color-dark-foreground), var(--g5-color-dark), var(--g5-color-dark),var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary));
	}

	&.btn-gray {
		@include btn-variant(var(--g5-color-gray-foreground), var(--g5-color-gray), var(--g5-color-gray),var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary));
	}

	&.btn-success {
		@include btn-variant(var(--g5-color-success-foreground), var(--g5-color-success), var(--g5-color-success),var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary));
	}

	&.btn-danger {
		@include btn-variant(var(--g5-color-danger-foreground), var(--g5-color-danger), var(--g5-color-danger),var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary));
	}

	&.btn-warning {
		@include btn-variant(var(--g5-color-warning-foreground), var(--g5-color-warning), var(--g5-color-warning),var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary));
	}

	&.btn-info {
		@include btn-variant(var(--g5-color-info-foreground), var(--g5-color-info), var(--g5-color-info),var(--g5-color-primary-foreground), var(--g5-color-primary), var(--g5-color-primary));
	}

	&.btn-icon-left i {
		margin-right: 5px;
	}

	&.btn-icon-right i {
		margin-left: 5px;
	}

	&.btn-dark.btn-outline{
		--g5-btn-outline-color: var(--g5-color-heading);
		--g5-btn-border-color: var(--g5-color-border);
	}

	i{
		font-size: 80%;
	}

}

.btn-link-border{
	.btn.btn-link{
		border-bottom: 2px solid;
		padding-bottom: 4px;
	}
}

.btn-purchase{
	&.btn-light{
		@include box-shadow(0 4px 21px 0 rgb(0 0 0 / 15%));
		--g5-btn-color: var(--g5-color-primary);
		--g5-btn-font-weight: 700;
		--g5-btn-padding-x: 30px;
		--g5-btn-line-height: 48px;
		&:hover{
			--g5-btn-hover-color: var(--g5-color-dark-foreground);
		}
	}
}