//
// - Local Mixins
// - Default Button
// - Primary Button
// - Large Button
// - Small Button
// - Rounded Rectangular Button
// - Button Groups
// - Form Bottom Button Groups
// -------------------------------------------------------------
@import '../variables/colors.less';
@import '../variables/typography.less';

// Local Mixins
// -------------------------------------------------
.hover-button () {
	background-color: @color-button-default-hover-background;
	border-color: @color-button-default-hover-border;
	color: @color-button-default-text;
}

.hover-primary-button () {
	box-shadow: inset 1000px 400px 0 0 rgba(0, 0, 0, 0.2);
	color: @color-button-primary-text;
}

// Default button
// -------------------------------------------------
.o-button {
	background-color: @color-button-default-background;
	background-image: none;
	border: 1px solid @color-button-default-border;
	border-radius: 17px;
	box-shadow: inset 1000px 400px 0 0 rgba(0, 0, 0, 0);
	color: @color-button-default-text;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: @font-weight-bold;
	line-height: 1.42857143;
	margin-bottom: 0;
	padding: 6px 17px;
	position: relative;
	text-align: center;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;

	// Override the default browser focus outline with a more attractive one.
	@button-focus-outline-gap: 2px;

	&:active,
	&.active {
		background-image: none;
		-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		outline: 0;
		.hover-button();
	}

	&.disabled,
	&[disabled],
	&.is-disabled,
	&.disabled:hover,
	&[disabled]:hover,
	&.is-disabled:hover,
	&.disabled:focus,
	&[disabled]:focus,
	&.is-disabled:focus,
	&.disabled:active,
	&[disabled]:active,
	&.is-disabled:active,
	&.disabled.active,
	&[disabled].active,
	&.is-disabled.active,
	fieldset[disabled] &,
	fieldset[disabled] &:hover,
	fieldset[disabled] &:focus,
	fieldset[disabled] &:active,
	fieldset[disabled] &.active {
		box-shadow: none;
		color: @color-ui-theme-text-disabled;
		cursor: not-allowed;
		pointer-events: none;
	}

	@media (hover) {
		&:hover {
			.hover-button();
		}
	}

	.open .dropdown-toggle & {
		background-image: none;
		.hover-button();
	}

	// Work around ng-show waiting the transition duration before hiding.
	// https://github.com/angular/angular.js/issues/8224
	//
	// Apply the .ng-animate-opt-in class to get the old behavior back.
	&.ng-animate:not(.ng-animate-opt-in) {
		transition-duration: 0s;
	}

	// Primary button
	// -------------------------------------------------
	&.o-button--primary {
		background-color: @color-button-primary-background;
		border-color: @color-button-primary-border;
		color: @color-button-primary-text;

		@media (hover) {
			&:hover {
				.hover-primary-button();
			}
		}
	}

	&.o-button--primary[disabled] {
		background-color: @color-gray-xx-light;
		border-color: @color-gray-xx-light;
		color: @color-ui-theme-text-disabled;
	}

	.open .o-button--primary.dropdown-toggle {
		.hover-primary-button();
	}

	&.o-button--primary.active {
		.hover-primary-button();
	}

	// Tertiary button
	// -------------------------------------------------
	&.o-button--tertiary {
		background-color: transparent;
		border-color: transparent;

		@media (hover) {
			&:hover {
				.hover-button();
			}
		}
	}

	&.o-button--tertiary.active {
		.hover-button();
	}

	// Large button
	// -------------------------------------------------
	&.o-button--large {
		border-radius: 24px;
		font-size: 18px;
		line-height: 1.33;
		padding: 11px 24px 11px;
	}

	&.o-button--login {
		border-radius: 24px;
		font-size: 18px;
		line-height: 1.33;
		padding: 11px 20% 11px;
	}

	// Fix outline border-radius for larger buttons
	&.o-button--large,
	&.o-button-login {
		/* stylelint-disable-next-line max-nesting-depth */
		&:focus,
		&:active:focus,
		&.active:focus {
			/* stylelint-disable-next-line max-nesting-depth */
			&::after {
				border-radius: 26px;
			}
		}
	}

	// Small button
	// -------------------------------------------------
	&.o-button--small {
		border-radius: 16px;
		font-size: 13px;
		font-weight: @font-weight-regular;
		line-height: 1;
		padding: 6px 12px;
		white-space: nowrap;
	}

	// Fix outline border-radius for smaller buttons
	&.o-button--small:focus,
	&.o-button--small:active:focus,
	&.o-button--small.active:focus&::after {
		border-radius: 16px;
	}

	// Rounded rectangle button
	// -------------------------------------------------
	&.o-button--round-rect {
		background: #fff;
		border: none;
		border-radius: 6px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 30%);
		font-size: 13px;
		font-weight: @font-weight-regular;
		line-height: 1;
		margin-right: 6px;
		padding: 6px 12px;
		transition: all 0.25s ease-in;
		white-space: nowrap;

		@media (hover) {
			&:hover {
				.hover-button();
			}
		}

		/* stylelint-disable-next-line max-nesting-depth */
		& span:last-of-type {
			margin-left: 4px;
		}
	}
}

// Button groups
// -------------------------------------------------
.o-button-group {
	// Font-size override to suppress whitespace in output
	font-size: 0;

	// Interior rounded edges and margins are removed & borders are added:
	& > .o-button:not(:first-child) {
		border-bottom-left-radius: 0;
		border-left: none;
		border-top-left-radius: 0;
		margin-left: 0;
	}

	& > .o-button:not(:last-child) {
		border-bottom-right-radius: 0;

		// All buttons except the last one get a right-border.
		// The primary-background color looks good and ensures a primary button in
		// the group doesn't have a clashing gray border against it.
		border-right: 1px solid @color-button-default-border;
		border-top-right-radius: 0;
		margin-right: 0;
	}

	// "Selected" buttons can be used to indicate state.
	& > .o-button.is-selected {
		background-color: @color-gray-xx-light;
		color: @color-gray-x-dark;
	}
}

// Form bottom button groups
// -------------------------------------------------
.o-form-bottom-button-group {
	align-items: center;
	border-top: 1px solid @color-gray-xx-light;
	display: flex;
	justify-content: flex-end;
	margin-top: 50px;
	padding-top: 10px;

	& > .o-button {
		margin-left: 5px;
	}

	// The default is too tight between the leftmost button and text hints or links.
	& > .o-button:first-of-type {
		margin-left: 10px;
	}
}