input[type="button"],
input[type="reset"],
input[type="submit"],
.themesflat-button, .tf-button, .btn {
	font-family: var(--theme-btn-font);
	font-style: var(--theme-btn-font-style);
	font-size: var(--theme-btn-font-size);
	letter-spacing: var(--theme-btn-letter-spacing);
	display: inline-block;
	cursor: pointer;
	font-weight: 700;
	border-color: transparent;
	text-transform: capitalize;
	border-width: 0;
	border-radius: 0;
	overflow: hidden;
	background-color: var(--theme-secondary-color);
	color: var(--theme-secondary-foreground-color);
	&:hover{
		color: var(--theme-accent-foreground-color);
		background-color: var(--theme-accent-color);
	}
}

.themesflat-button,
.tf-button, .btn,
input[type="button"],
input[type="reset"],
input[type="submit"], .tf-button {
	@include button-size($height__input, 19px, 14px);

	&.btn-block,
	&.btn-full {
		display: block;
		width: 100%;
	}

	&.btn-inline {
		display: inline-block;
		vertical-align: top;
	}


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

	&.btn-sm {
		@include button-size(32px, 25px, 12px);
	}

	&.btn-md {
		@include button-size($height__input, 19px, 14px);
	}

	&.btn-lg {
		@include button-size(50px, 34px, 16px);
	}

	&.btn-xl {
		@include button-size(60px, 40px, 22px);
	}
	
	&.btn-round {
		@include border-radius(5em);
	}

	&.btn-rounded {
		@include border-radius(0.25rem);
	}

	&.btn-square {
		@include border-radius(0);
	}

	// Button color
	&.btn-accent {
		@include button-variant(var(--theme-accent-foreground-color), var(--theme-accent-color), var(--theme-accent-color), var(--theme-accent-foreground-color), var(--theme-secondary-color), var(--theme-secondary-color));
	}

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

	&.btn-secondary {
		@include button-variant(var(--theme-secondary-foreground-color), var(--theme-secondary-color), var(--theme-secondary-color), var(--theme-accent-foreground-color), var(--theme-accent-color), var(--theme-accent-color));
	}

	&.btn-light {
		@include button-variant(var(--theme-light-foreground-color), var(--theme-light-color), var(--theme-light-color), var(--theme-light-color), var(--theme-accent-color), var(--theme-accent-color));
	}

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

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

	&.btn-outline {
		background-color: transparent;
		border-color: var(--theme-color-border);
		border-width: 2px;
	}

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

	i {
		font-size: 80%;
	}

	&.btn-link {
		background-color: transparent !important;
		border-width: 0;
		text-decoration: none;
		@include border-radius(0);
		padding-left: 0;
		padding-right: 0;
		line-height: 1.3;
	}

	&.btn-link:not(:disabled):not(.disabled):active {
		color: initial;

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