// ==========================================================================
// jQuery UI Buttons
// ==========================================================================
.#{$selector} {
	.ui-widget-content .ui-button,
	.ui-button {
		background-color: $primary-color;
		color: $primary-color-text;
		border: 0 none;
		overflow: hidden;
		text-transform: uppercase;
		padding: 1em 28px;
		display: inline-block;
		margin: 0.2em 1em ($line-height-computed / 2) 0;
		border-radius: 2px;
		height: auto;
		font-size: 1em;
		.ui-button-text {
			text-transform: uppercase;
			padding: 0;
			margin: 0;
			font-weight: normal;
			position: relative;
			z-index: 2;
			i[data-ipt-icomoon]::before {
				vertical-align: middle;
			}
		}
		// jQuery UI 1.12 compatibility
		.ipticm {
			margin-right: 2px;
		}
		&.ui-button-text-icon-primary {
			padding-left: 49px;
		}
		&:last-child {
			margin-right: 0;
		}
		@include material__box-shadow();
		@include material__smooth-tran(200ms);

		&:active,
		&:visited,
		&:focus {
			color: $primary-color-text;
			outline: none;
		}

		&:hover {
			background-color: lighten($primary-color, 5%);
			color: $primary-color-text;
			@include material__box-shadow-hover();
		}

		// focus a11y
		&:focus {
			box-shadow: 0 0 0 2px fade-out($primary-color, 0.9);
		}

		&[disabled] {
			background-color: $disabled-color;
			color: $disabled-color-text;
			box-shadow: none;
		}

		.ui-icon {
			margin-left: -14px;
			margin-top: -2px;
			left: -4px;
		}

		&.secondary-button,
		&.ipt-ui-button {
			margin: 0;
			background: $preset-button-container;
			color: $preset-button-container-color;
			box-shadow: none;
			border-radius: 0;
			&:active,
			&:focus {
				color: $preset-button-container-color;
			}
			&:hover {
				background-color: $preset-button-container-button-hover;
			}
			&[disabled] {
				opacity: 0.5;
			}
			// focus a11y
			&:focus {
				box-shadow: 0 0 0 2px
					fade-out($preset-button-container-color, 0.9);
			}
		}

		&.small {
			font-size: 0.8em;
			padding: 1em 14px;
			.ui-icon {
				margin-left: 0;
			}
		}
		&.large {
			font-size: 1.2em;
		}
	}

	// Button groups
	.ipt-eform-material-button-container {
		text-align: left;
		margin: 0.2em 0 ($line-height-computed / 2) 0;

		// Generic
		.eform-button-container-inner {
			display: flex;
			align-items: stretch;
			flex-flow: row wrap;
			justify-content: flex-start;

			.ui-button {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 3em;
				padding: 0 2em;
				width: auto;
				text-align: center;
				flex: 0 0 auto;
				margin: 0.5em;
				word-break: break-all;
				-webkit-hyphens: auto;
				    -ms-hyphens: auto;
				        hyphens: auto;
				background: $preset-button-container;
				color: $preset-button-container-color;
				box-shadow: none;
				border-radius: 0;
				&:active,
				&:focus {
					color: $preset-button-container-color;
				}
				&:hover {
					background-color: $preset-button-container-button-hover;
				}
				&[disabled] {
					opacity: 0.5;
				}
				&:focus {
					box-shadow: 0 0 0 2px
						fade-out($preset-button-container-color, 0.8);
				}
			}
		}

		// Sizes
		&.size-small {
			.eform-button-container-inner {
				.ui-button {
					font-size: 0.8em;
				}
			}
		}
		&.size-large {
			.eform-button-container-inner {
				.ui-button {
					font-size: 1.2em;
				}
			}
		}

		// Alignments
		&.align-center {
			.eform-button-container-inner {
				justify-content: center;
			}
		}
		&.align-right {
			.eform-button-container-inner {
				justify-content: flex-end;
			}
		}
		&.align-justify {
			width: 100%;
			// overflow-y: auto;
			.eform-button-container-inner {
				align-items: center;
				justify-content: center;
				width: auto;

				.eform-material-button {
					width: auto;
					flex: 1 0 auto;
					white-space: nowrap;
				}
			}
		}

		// Styles
		// flat design
		&.ipt_fsqm_form_button_container--flat {
			.eform-button-container-inner {
				.ui-button {
					border-radius: 4px;
					// flex: 0 1 auto;
					.ui-button-text {
						font-size: 0.9em;
					}
				}
			}
			// Alternate color
			&.eform-material-alternate-pb {
				.eform-button-container-inner {
					.ui-button {
						background-color: $primary-color;
						color: $primary-color-text;
						.waves-ripple {
							background-color: $primary-color-light;
						}

						&:hover {
							background-color: $primary-color-dark;
						}

						&:focus {
							box-shadow: 0 0 0 2px fade-out($primary-color, 0.8);
						}
					}
				}
			}
			// Rounded
			&.eform-material-rounded-pb {
				.ui-button {
					border-radius: 2em;
				}
			}
		}

		// border design
		&.ipt_fsqm_form_button_container--border {
			.eform-button-container-inner {
				align-items: flex-start;
				.ui-button {
					border-radius: 4px;
					// flex: 0 1 auto;
					// height: calc(3em + 6px);
					transition: color 200ms ease-in-out,
						background-color 200ms ease-in-out,
						border-color 200ms ease-in-out;
					border-bottom: 6px solid fade-out(#000, 0.85);
					&:hover {
						border-bottom-color: fade-out(#000, 0.75);
					}
					&:active {
						top: 6px;
						// height: calc(3em - 6px);
						border-bottom: 0px solid fade-out(#000, 0.7);
					}
					.ui-button-text {
						font-size: 0.9em;
					}
				}
			}
			// Alternate color
			&.eform-material-alternate-pb {
				.eform-button-container-inner {
					.ui-button {
						background-color: $primary-color;
						color: $primary-color-text;

						.waves-ripple {
							background-color: $primary-color-light;
						}

						&:hover {
							background-color: $primary-color-dark;
						}

						&:focus {
							box-shadow: 0 0 0 2px fade-out($primary-color, 0.8);
						}
					}
				}
			}
			// Rounded
			&.eform-material-rounded-pb {
				.ui-button {
					border-radius: 2em;
				}
			}
		}

		// gradient
		&.ipt_fsqm_form_button_container--gradient {
			.eform-button-container-inner {
				.ui-button {
					border-radius: 4px;
					// flex: 0 1 auto;
					background-color: $preset-button-container-button-hover;
					background-image: linear-gradient(
						to bottom,
						#{$preset-button-container},
						#{darken($preset-button-container, 15%)}
					);
					border: 1px solid darken($preset-button-container, 7.5%);
					background-size: 100% 200%;
					&:hover {
						border-color: darken($preset-button-container, 15%);
						background-position: center 100%;
					}
					.ui-button-text {
						font-size: 0.9em;
					}
				}
			}
			// Alternate color
			&.eform-material-alternate-pb {
				.eform-button-container-inner {
					.ui-button {
						background-image: linear-gradient(
							to bottom,
							#{$primary-color},
							#{darken($primary-color, 15%)}
						);
						color: $primary-color-text;
						border-color: darken($primary-color, 7.5%);
						.waves-ripple {
							background-color: $primary-color-light;
						}
						&:hover {
							border-color: darken($primary-color, 7.5%);
						}

						&:focus {
							box-shadow: 0 0 0 2px fade-out($primary-color, 0.8);
						}
					}
				}
			}
			// Rounded
			&.eform-material-rounded-pb {
				.ui-button {
					border-radius: 2em;
				}
			}
		}

		// outline
		&.ipt_fsqm_form_button_container--outline {
			.eform-button-container-inner {
				.ui-button {
					border-radius: 4px;
					flex: 0 1 auto;
					border: 2px solid darken($divider-color, 10%);
					background-color: $preset-bg;
					&:hover {
						background-color: fade-out(
							$preset-button-container-button-hover,
							0.5
						);
						border-color: darken($divider-color, 15%);
					}
					.ui-button-text {
						font-size: 0.9em;
					}
				}
			}
			// Alternate color
			&.eform-material-alternate-pb {
				.eform-button-container-inner {
					.ui-button {
						border-color: $primary-color;
						color: $primary-color;
						&:hover {
							background-color: fade-out($primary-color, 0.8);
							border-color: $primary-color-dark;
						}

						.waves-ripple {
							background-color: $primary-color-light;
						}

						&:focus {
							box-shadow: 0 0 0 2px fade-out($primary-color, 0.8);
						}
					}
				}
			}
			// Rounded
			&.eform-material-rounded-pb {
				.ui-button {
					border-radius: 2em;
				}
			}
		}
	}
}