@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@Button-size-padding: @size-standard;
@Button-size-height: @size-standard-height;
@Button-size-height-small: @size-standard-height - 8;
@Button-size-height-large: @size-standard-height + 12;
@Button-size-borderRadius: @size-borderRadius;

.lucid-Button {
	// Mixins
	.no-safari-flicker();
	.box-sizing();
	.gradient-animation(@featured-color-default-gradientStartColor, @featured-color-default-gradientEndColor);

	cursor: pointer;
	height: @Button-size-height;
	border: 1px solid @featured-color-default-borderColor;
	border-radius: @Button-size-borderRadius;
	font-size: @fontSize;
	font-family: @fontFamily;
	letter-spacing: 0.05em;
	padding: 0 @Button-size-padding;
	outline: none;
	color: @color-black;

	// from normalize.css@4.1.1
	margin: 0; /* 2 */
	overflow: visible;
	text-transform: none;
	-webkit-appearance: button; /* 2 */
	// end normalize

	white-space: nowrap;

	// don't show Firefox's focus ring: https://github.com/appnexus/lucid/issues/292
	&::-moz-focus-inner {
		border: 0;
	}

	&::before { border-radius: @Button-size-borderRadius; }

	&&-has-only-icon {
		padding: 0 5px;
	}

	& &-content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;

		> .lucid-Icon {
			transition: color @timing-animation-hover, fill @timing-animation-hover;
		}

		> span {
			transition: color @timing-animation-hover, fill @timing-animation-hover;
		}
	}

	// Types
	&&-primary {
		.gradient-animation(@featured-color-primary-gradientStartColor, @featured-color-primary-gradientEndColor);
		.make-is-disabled(lucid-Button, @featured-color-primary-gradientStartColor, @featured-color-primary-gradientEndColor);
		.bold();

		border-color: @featured-color-primary-borderColor;
		color: @color-white;

		.lucid-Icon { fill: @color-white; }
	}

	&&-success {
		.gradient-animation(@featured-color-success-gradientStartColor, @featured-color-success-gradientEndColor);
		.make-is-disabled(lucid-Button, @featured-color-success-gradientStartColor, @featured-color-success-gradientEndColor);
		.bold();

		color: @color-white;
		border-color: @featured-color-success-borderColor;

		.lucid-Icon { fill: @color-white; }
	}

	&&-info {
		.gradient-animation(@featured-color-info-gradientStartColor, @featured-color-info-gradientEndColor);
		.make-is-disabled(lucid-Button, @featured-color-info-gradientStartColor, @featured-color-info-gradientEndColor);
		.bold();

		border-color: @featured-color-info-borderColor;
		color: @color-white;

		.lucid-Icon { fill: @color-white; }
	}

	&&-warning {
		.gradient-animation(@featured-color-warning-gradientStartColor, @featured-color-warning-gradientEndColor);
		.make-is-disabled(lucid-Button, @featured-color-warning-gradientStartColor, @featured-color-warning-gradientEndColor);
		.bold();

		border-color: @featured-color-warning-borderColor;
		color: @color-white;

		.lucid-Icon { fill: @color-white; }
	}

	&&-danger {
		.gradient-animation(@featured-color-danger-gradientStartColor, @featured-color-danger-gradientEndColor);
		.make-is-disabled(lucid-Button, @featured-color-danger-gradientStartColor, @featured-color-danger-gradientEndColor);
		.bold();

		border-color: @featured-color-danger-borderColor;
		color: @color-white;

		.lucid-Icon { fill: @color-white; }
	}

	&&-link {
		.gradient-reset();
		.make-is-disabled(lucid-Button);

		border: none;
		background: none;
		color: @color-linkColor;

		&:hover:not(.lucid-Button-is-disabled),
		&:active:not(.lucid-Button-is-disabled),
		&:focus:not(.lucid-Button-is-disabled) {
			.lucid-Icon { fill: @color-linkColorHover; }

			background: @color-lightGray;
			color: @color-linkColorHover;
			box-shadow: none;
		}

		&:active::before {
			opacity: 0;
		}

		.lucid-Button-content {
			line-height: 1em;
		}

		.lucid-Icon {
			fill: @color-primary;
			margin-right: 0.25em;

			+ span {
				line-height: 1.4em;
			}
		}

	}

	&&-link&-has-only-icon {
		// Clear the right margin, only need it if the has text with it
		.lucid-Icon {
			margin-right: 0;
		}
	}

	// Sizes
	&&-short {
		height: @Button-size-height-small;
	}

	&&-small {
		height: @Button-size-height-small;
		padding: 0 @Button-size-padding/1.5;
	}

	&&-small&-has-only-icon {
		padding: 0 1px;
	}

	&&-large {
		height: @Button-size-height-large;
		padding: 0 @Button-size-padding*1.5;
		font-size: 1.2em;

		.lucid-Icon {
			width: 1.2em;
			height: 1.2em;
		}
	}

	&&-large&-has-only-icon {
		padding: 0 8px;
	}

	// States
	&&-is-active {
		.gradient-reset();

		background: @featured-color-primary;
		border-color: @featured-color-primary;
		color: @color-white;

		.lucid-Icon { fill: @color-white; }
	}

	&&-is-active&-primary {
		background: @featured-color-primary;
		border-color: @featured-color-primary;
	}

	&&-is-active&-success {
		border-color: @featured-color-success-borderColor;
		background: @featured-color-success;
	}

	&&-is-active&-info {
		border-color: @featured-color-info-borderColor;
		background: @featured-color-info;
	}

	&&-is-active&-warning {
		border-color: @featured-color-warning-borderColor;
		background: @featured-color-warning;
	}

	&&-is-active&-danger {
		border-color: @featured-color-danger-borderColor;
		background: @featured-color-danger;
	}

	&-is-disabled {
		.gradient-reset(linear-gradient(@standardGradient, @featured-color-default-gradientStartColor, @featured-color-default-gradientEndColor));
		.opacity();
		.no-cursor();
	}

	// Also needed in some cases to beat other libraries (e.g. pure.css)
	&[disabled] {
		.no-cursor();
	}
}