@import '../styles/variables';

.Button {
	--line-height: 35px;
	display: inline-block;
	min-width: 86px;
	padding: 0 20px;
	border: none;
	border-radius: 4px;
	position: relative;
	background: var(--button-gradient);
	outline: 0;
	text-align: center;
	text-decoration: none;
	line-height: var(--line-height);
	cursor: default;
	user-select: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

	&__value {
		display: inline-block;
		position: relative;
		z-index: 2;
		color: var(--text-color2-inverse);
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
	}

	&__icon {
		margin-right: 10px;
		position: relative;
		top: -1px;
	}

	&__helper {
		width: 100%;
		height: 100%;
		border-radius: 4px;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		background: rgba(255, 255, 255, 0.04);
		transition: opacity 0.2s ease-in-out;
	}

	&:hover {
		.Button__helper {
			opacity: 1;
		}
	}

	&:active {
		.Button__helper {
			opacity: 1;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.06) 100%);
		}
	}

	/* Button size */
	&--large {
		min-width: 96px;
		padding: 0 20px;
		line-height: 44px;

		.Button__icon {
			top: -2px;
		}

		&.Button--value-icon {
			padding-left: 16px;

			.Button__icon {
				margin-right: 12px;
			}
		}
	}

	&--medium {
		min-width: 86px;
		padding: 0 20px;
		line-height: 34px;

		&.Button--value-icon {
			padding-left: 16px;

			.Button__icon {
				margin-right: 10px;
			}
		}
	}

	&--small {
		min-width: 66px;
		padding: 0 16px;
		line-height: 28px;

		.Button__icon {
			top: -2px;
		}

		&.Button--value-icon {
			padding-left: 12px;

			.Button__icon {
				margin-right: 10px;
			}
		}
	}

	&--primary {
		background: var(--primary-gradient);

		&:active {
			.Button__helper {
				opacity: 1;
				background: rgba(0, 0, 0, 0.1);
			}
		}
	}

	&--green {
		background: linear-gradient(#2fab61, #2d955a);

		&:active {
			.Button__helper {
				opacity: 1;
				background: rgba(0, 0, 0, 0.1);
			}
		}
	}

	&--red {
		background: linear-gradient(#f3155b, #ca1954);

		&:active {
			.Button__helper {
				opacity: 1;
				background: rgba(0, 0, 0, 0.1);
			}
		}
	}

	&--fullwidth {
		width: 100%;
	}

	/* Helpers */
	&--icon {
		.Button__icon {
			margin-right: 0;
		}
	}

	&--value-icon {
		padding-left: 16px;
	}

	&--disabled {
		pointer-events: none;
		cursor: default;
		background: transparent;
		border: 1px solid var(--button-border-color-disabled) !important; // stylelint-disable-line
		line-height: calc(var(--line-height) - 2px/* border * 2 */);
		box-shadow: none;

		.Button__value {
			color: var(--button-text-color-disabled) !important; // stylelint-disable-line
		}
	}
}
