@import "./miniui.scss";

// Button

.button {
	cursor: pointer;
	display: inline-block;
	padding: 0 1.28571429em;
	margin: 0 0.42857143em 0 0;
	height: 2.57142857em;
	min-height: 1em;
	line-height: 2.57142857em;
	outline: none;
	user-select: none;
	color: rgba(0, 0, 0, .6);
 	background-color: #fff;
	border: 1px solid $gray;
	border-radius: 0.25em;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	font-family: Lato, "Helvetica Neue", Helvetica, 'Microsoft YaHei' Arial, "\5b8b\4f53", sans-serif;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transition: all 0.25s ease;
	box-shadow: 0 0 0 0 rgba(34,36,38,.15) inset;

	// Hover
	&:hover,
	&.hover {
		background-color: $lightgray;
		border-color: #8c8c8c;
	}
	&:hover icon {
		opacity: 0.85;
	}

	//Active
	&.active,
	&.active:hover,
	&:active,
	&:focus {
		background-color: #babbbc;
	}

	i {
		vertical-align: middle;
	}

	// Size
	&.mini {
		font-size: 12px !important;
		padding: 0 .5em;
		height: 1.66666666em;
		line-height: 1.66666666em;
		font-weight: normal;
	}
	&.label.mini { padding-left: 2.16666667em; }
	&.label.mini i {
		width: 1.66666667em;
		padding: 0.33333333em;
	}

	&.tiny {
		font-size: 12px !important;
		padding: 0 0.5em;
		height: 2em;
		line-height: 2em;
		font-weight: normal;

		i {
			font-size: 14px;
		}
	}
	&.label.tiny { padding-left: 2.5em; }
	&.label.tiny i {
		width: 2em;
		padding: 0.5em;
	}

	&.small {
		font-size: 14px !important;
		padding: 0 0.71428571em;
		height: 2.28571429em;
		line-height: 2.28571429em;
		font-weight: normal;
	}
	&.label.small { padding-left: 3em; }
	&.label.small i {
		width: 2.28571429em;
		padding: 0.64285714em;
	}

	&.large {
		font-size: 16px !important;
		padding: 0 0.8125em;
		height: 2.625em;
		line-height: 2.625em;
		font-weight: normal;
	}
	&.label.large { padding-left: 3.4375em; }
	&.label.large i {
		width: 2.625em;
		padding: 0.8125em;
	}


	&.big { font-size: 20px !important; }

	// Shape
	&.circle {
		border-radius: 1.28571429em;
		padding-left: 0;
		padding-right: 0;
		min-width: 2.57142857em;
		&.mini {
			border-radius: 50%;
			height: 0.83333333em;
		}
	}

	// label icon
	&.label {
		padding-left: 3.6428em;
		position: relative;
	}

	&.label i {
		background-color: rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		line-height: 1em;
		font-size: 1em;
		width: 2.57142857em;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 0.78571429em;
	}

	// Loading
	&.loading {
		position: relative;
		cursor: default;
		color: transparent !important;
		transition: all 0s linear;
	}

	&.loading.label i {
		display: none;
	}

	&.loading::after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background: transparent url(../images/loader-gray.svg) no-repeat center center;
		background-size: 24px 24px;
	}

	// Disabled
	&.disabled,
	&:disabled,
	&.disabled:hover,
	&:disabled:hover,
	&.disabled:active,
	&:disabled:active {
		cursor: not-allowed;
		opacity: 0.6 !important;
		background-image: none !important;
		box-shadow: none !important;
		&.lightgray,
		&.white {
			border: 1px solid $lightgray;
		}
	}

	&+.button {
		margin-left: 12px;
	}
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
	border: 0;
	box-shadow: none;
	padding: 0;
}

// Color
@mixin button-style ($name, $color) {
	.#{"" + $name}.button {
		background-color: $color;
		color: $white;
		border: 0;
	}
	.#{"" + $name}.button:hover {
		background-color: lighten($color, 5%);
	}
	.#{"" + $name}.button.active,
	.#{"" + $name}.button:active,
	.#{"" + $name}.button:focus {
		background-color: darken($color, 10%);
	}
	.#{"" + $name}.button.loading::after {
			background: transparent url(../images/loader.svg) no-repeat center center;
			background-size: 24px 24px;
	}
}


@each $name, $color in $color-list {
	@include button-style($name, $color);
}
.button.white {
	border: 1px solid $gray;
	color: $text-color;
}


// style

@mixin button-basic ($name, $color) {
	.#{"" + $name}.button.basic {
		background-color: transparent;
		color: $color;
		border: 1px solid $color;
	}
	.#{"" + $name}.button.basic:hover {
		color: $white;
		border: 1px solid $color;
		background-color: $color;
	}
	.#{"" + $name}.button.basic.active,
	.#{"" + $name}.button.basic:active,
	.#{"" + $name}.button.basic:focus {
		color: $white;
		border: 1px solid darken($color, 10%);
		background-color: darken($color, 10%);
	}
}

@each $name, $color in $color-list {
	@include button-basic($name, $color);
}



// group
.button-group {
	display: inline-block;
	margin: 0 0.25em 0 0;

	&>.button {
		margin: 0 auto !important;

		&:not(:first-child):not(:last-child) {
			border-radius: 0;
			border-right: 0;
			border-left: 0;
		}
		&:first-child:not(:last-child) {
			border-top-right-radius: 0;
	    border-bottom-right-radius: 0;
			border-right: 0;
		}
		&:last-child:not(:first-child) {
			border-top-left-radius: 0;
	    border-bottom-left-radius: 0;
			border-left: 0;
		}
	}
}