//按钮
#{$V}btn {
	line-height: $line-height-input-button;
	padding: rem(8) rem(18);
	color: $--dark;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	background: {
		color: $--white;
		image: none;
	}
	border: rem($border-width-xs) $border-style-solid $--light-dark;
	border-radius: rem(3);
	font-size: rem($font-size-sm);
	outline: 0;
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	transition: all .3s ease-in-out, box-shadow .35s cubic-bezier(.35, .81, .45, 1.47);

	&:not(.disabled):not([disabled]):not(.v-link) {
		&:hover {
			color: inherit;
			background-color: rgba($--light-dark, .15);
			text-decoration: none;
		}
		&:active,
		&.active {
			background-color: rgba($--light-dark, .4);
		}
		&:focus,
		&.focus {
			outline: 0;
			box-shadow: 0 0 0 rem(3) rgba($--light-dark, .4);
		}
	}
	//尺寸
	&.v-tiny {
		line-height: $line-height-xl;
		font-size: rem($font-size-xs);
		padding: rem(1) rem(6);
	}
	&.v-small {
		font-size: rem($font-size-sm);
		padding: rem(4) rem(12);
	}
	&.v-large {
		line-height: $line-height-lg-p;
		font-size: rem($font-size-lg);
		padding: rem(9) rem(28);
	}
	//Link
	&.v-link {
		&:not(.disabled):not([disabled]) {
			color: $--dark;
			border-color: $--tp;
			background: {
				color: $--tp;
				image: none;
			}

			&:hover {
				color: $--black;
				text-decoration: underline;
			}
		}
	}
	//轮廓线
	&.v-outline {
		background-color: $--tp;
	}

	//主题颜色
	@each $key, $value in $btn-theme-color {
		@include button-color($key, $value)
	}

	//Gradient(渐变)
	&.v-gradient {
		background-image: linear-gradient(top, rgba($--black, 0) 0%, rgba($--black, .2) 50%, rgba($--black, .3) 51%, rgba($--black, .1) 100%);
	}

	//disabled
	@at-root {
		%btnDisabled {
			cursor: not-allowed;
			opacity: .5;
			color: $--dark-light;
		}
	}
	&:not(.v-link)[disabled],
	&:not(.v-link).disabled {
		@extend %btnDisabled;
		border-color: $--light-b;
		background-color: $--gray-light;
	}
	&.v-link[disabled],
	&.v-link.disabled {
		@extend %btnDisabled;
		border-color: $--tp;
		background-color: $--tp;
		box-shadow: none;
	}
}