// ==========================================================================
// 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;
		.ui-button-text {
			text-transform: uppercase;
			padding: 0;
			margin: 0;
			font-weight: normal;
		}
		&.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();
		}

		&[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;
			}
		}

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

	.ipt-eform-material-button-container {
		text-align: left;
		margin: 0.2em 0 ($line-height-computed / 2) 0;
		&.align-center {
			text-align: center;
		}
		&.align-right {
			text-align: right;
		}
		&.align-justify {
			display: table;
			width: 100%;
			border-collapse: collapse;
			overflow-y: auto;

			.eform-button-container-inner {
				display: table-row;
				width: 100%;
				border-collapse: collapse;

				.eform-material-button {
					display: table-cell;
					width: 1%;
					border-collapse: collapse;
					white-space: nowrap;
					&.ui-button {
						box-shadow: none;
						border: 1px solid $preset-button-container-button-hover;
						border-radius: 0;
					}
				}
			}
		}
	}
}