@include body-class(true) {

	.sui-button,
	a.sui-button,
	button.sui-button {

		&, &-icon {
			cursor: pointer;
			display: inline-block;
			position: relative;
			margin: 0;
			border-width: 2px;
			border-style: solid;
			border-color: transparent;
			border-radius: $border-radius;
			text-decoration: none;
			text-align: center;
			transition: $transition;

			.sui-loading {
				width: 16px;
				height: 16px;
				display: none;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: absolute;
				margin: 0;

				&:before {
					display: block;
				}
			}

			.sui-loading-text,
			.sui-button-text-default {
				display: block;
				pointer-events: none;
				@include media(max-width, md) {
					.sui-loading-text {
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.sui-button-text-onload {
				display: none;
			}

			[class*="sui-icon-"] {
				font-size: 12px;

				&:before {
					display: block;
					color: inherit;
				}
			}

			&:hover {
				outline: none;
				box-shadow: none;
			}

			&:focus {
				outline: none;
			}

			&.disabled,
			&:disabled,
			&[disabled],
			&.sui-button-onload,
			&.sui-button-onload-text {
				cursor: default;
				pointer-events: none;
			}

			&.sui-button-onload {
				pointer-events: none;
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.sui-loading {
					display: flex;
				}

				.sui-loading-text {
					opacity: 0;
				}
			}

			&.sui-button-onload-text {
				pointer-events: none;

				.sui-button-text-default {
					display: none;
				}

				.sui-button-text-onload {
					display: block;

					.sui-loading {
						width: auto;
						height: auto;
						display: inline-block;
						position: relative;
						vertical-align: unset;
						margin-right: 4px;

						&:before {
							display: inline-block;
						}
					}
				}
			}

			&:not(:last-child) {
				margin-right: 10px;
			}
		}
	}

	// VARIATION: Buttons with text
	.sui-button,
	a.sui-button,
	button.sui-button {
		width: auto;
		min-width: 80px;
		padding: 5px 14px;
		background-color: map-get($button-background, default);
		color: map-get($button-text-color, default);
		font: 500 12px/16px $font;
		letter-spacing: $font--letter-spacing;
		text-transform: uppercase;

		[class*="sui-icon-"] {
			vertical-align: middle;

			&:not(.sui-loading) {
				width: 22px;
				position: relative;
				top: -1px;
				margin-left: -7px;
			}
		}

		&:hover,
		&:focus {
			background-color: darken(map-get($button-background, default), 10%);
		}

		&:focus {
			outline: none;
			box-shadow: 0 0 0 2px map-get($button-shadow, default);
		}

		&.disabled,
		&:disabled,
		&[disabled],
		&.sui-button-onload,
		&.sui-button-onload-text {
			background-color: $button-disabled--background;
			color: $button-disabled--color;
		}

		// VARIATION: Button with right icon
		&.sui-button-icon-right {

			[class*="sui-icon-"] {

				&:not(.sui-loading) {
					margin-right: -7px;
					margin-left: 0;
				}
			}
		}

		// VARIATION: Colorize buttons
		@each $color in $button-colors {

			&.sui-button-#{"" + $color} {
				background-color: map-get($button-background, $color);
				color: map-get($button-text-color, $color);

				&:hover,
				&:focus {
					background-color: darken(map-get($button-background, $color), 10%);
				}

				&:focus {
					outline: none;
					box-shadow: 0 0 0 2px map-get($button-shadow, $color);
				}

				&.disabled,
				&:disabled,
				&[disabled],
				&.sui-button-onload,
				&.sui-button-onload-text {
					background-color: $button-disabled--background;
					color: $button-disabled--color;
				}
			}
		}

		// VARIATION: Upsell button
		&.sui-button-upsell {
			width: auto;
			height: 26px;
			padding: 4px 14px;
			border-color: $button-upsell--border-static;
			border-radius: 14px;
			background-color: transparent;
			color: $button-upsell--color-static;
			line-height: 14px;
			text-transform: none;

			&:hover,
			&:focus {
				opacity: 1;
				border-color: $button-upsell--border-active;
				background-color: $button-upsell--border-active;
				color: $button-upsell--color-active;
			}

			&:focus {
				outline: none;
				box-shadow: 0 0 0 2px $purple-ghost;
			}
		}

		// VARIATION: Dashed button
		&.sui-button-dashed {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-width: 1px;
			border-style: dashed;
			border-color: $button-dashed--border;
			background-color: $button-dashed--background;
			color: $button-dashed--color;
			line-height: 18px;

			&.sui-lg {
				height: $button-dashed-height-lg;

				@include media(max-width, md) {
					height: $button-dashed-height-md;
				}
			}

			@include media(max-width, md) {
				height: $button-dashed-height-md;
			}

			@include media(min-width, md) {
				height: $button-dashed-height;
			}
		}

		// VARIATION: Ghost button
		&.sui-button-ghost {
			border-color: map-get($button-border, default);
			background-color: transparent;
			color: map-get($button-background, default);

			&:hover,
			&:focus {
				border-color: map-get($button-background, default);
				background-color: map-get($button-background, default);
				color: map-get($button-text-color, default);
			}

			&:focus {
				outline: none;
				box-shadow: 0 0 0 2px map-get($button-shadow, default);
			}

			&.disabled,
			&:disabled,
			&[disabled],
			&.sui-button-onload,
			&.sui-button-onload-text {
				border-color: $button-disabled--background;
				background-color: $button-disabled--background;
				color: $button-disabled--color;
			}

			@each $color in $button-colors {

				&.sui-button-#{"" + $color} {
					border-color: map-get($button-border, $color);
					color: map-get($button-background, $color);

					&:hover,
					&:focus {
						border-color: map-get($button-background, $color);
						background-color: map-get($button-background, $color);
						color: map-get($button-text-color, $color);
					}

					&:focus {
						outline: none;
						box-shadow: 0 0 0 2px map-get($button-shadow, $color);
					}

					&.disabled,
					&:disabled,
					&[disabled],
					&.sui-button-onload {
						border-color: $button-disabled--background;
						background-color: $button-disabled--background;
						color: $button-disabled--color;
					}
				}
			}
		}

		// VARIATION: Compound button
		&.sui-button-compound {

			.sui-compound-desktop {

				@include media(max-width, md) {
					display: none;
				}

				@include media(min-width, md) {
					display: block;
				}
			}

			.sui-compound-mobile {

				[class*="sui-icon-"] {

					@include media(max-width, md) {
						margin-right: 0;
						margin-left: 0;
					}
				}

				@include media(max-width, md) {
					display: block;
				}

				@include media(min-width, md) {
					display: none;
				}
			}

			@include media(max-width, md) {
				min-width: 44px;
				padding-right: 5px;
				padding-left: 5px;
			}
		}

		// SIZE: Large
		&.sui-button-lg {
			padding: 8px 20px;
			font-size: 15px;
			line-height: 20px;

			[class*="sui-icon-"] {
				font-size: 16px;
			}
		}
	}

	// VARIATION: Buttons with icons (only)
	// This variation it's not related and must not be used with .sui-button class
	.sui-button-icon,
	a.sui-button-icon,
	button.sui-button-icon {
		width: 30px;
		height: 30px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 4px;
		background-color: transparent;
		color: map-get($button-icon--color, default);
		text-align: center;
		white-space: nowrap;

		[class*="sui-icon-"] {

			&:not(.sui-loading) {
				display: block;
			}
		}

		&:hover,
		&:focus,
		&.sui-active {
			background-color: map-get($button-icon--background, default);
			color: map-get($button-icon--color-hover, default);
		}

		&:focus {
			outline: none;
			box-shadow: 0 0 0 2px map-get($button-icon--shadow, default);
		}

		&.disabled,
		&:disabled,
		&[disabled],
		&.sui-button-onload,
		&.sui-button-onload-text {
			color: $button-disabled--color;
			background-color: $button-disabled--background;
		}

		@each $color in $button-colors {

			&.sui-button-#{"" + $color} {
				color: map-get($button-icon--color, $color);

				&:hover,
				&:focus,
				&.sui-active {
					background-color: map-get($button-icon--background, $color);
					color: map-get($button-icon--color-hover, $color);
				}

				&:focus {
					outline: none;
					box-shadow: 0 0 0 2px map-get($button-icon--shadow, $color);
				}

				&.disabled,
				&:disabled,
				&[disabled],
				&.sui-button-onload,
				&.sui-button-onload-text {
					color: $button-disabled--color;
					background-color: $button-disabled--background;
				}
			}
		}

		// DESIGN: Outlined
		&.sui-button-outlined {
			width: 44px;
			border-color: map-get($button-icon--border, default);

			&:hover,
			&:focus,
			&.sui-active {
				border-color: map-get($button-icon--background-hover, default);
				background-color: map-get($button-icon--background-hover, default);
				color: map-get($button-icon--alt, default);
			}

			&:focus {
				outline: none;
				box-shadow: 0 0 0 2px map-get($button-icon--shadow, default);
			}

			&.disabled,
			&:disabled,
			&[disabled],
			&.sui-button-onload,
			&.sui-button-onload-text {
				border-color: $button-disabled--background;
			}

			@each $color in $button-colors {

				&.sui-button-#{"" + $color} {
					border-color: map-get($button-icon--border, $color);

					&:hover,
					&:focus,
					&.sui-active {
						border-color: map-get($button-icon--background-hover, $color);
						background-color: map-get($button-icon--background-hover, $color);
						color: map-get($button-icon--alt, $color);
					}

					&:focus {
						outline: none;
						box-shadow: 0 0 0 2px map-get($button-icon--shadow, $color);
					}

					&.disabled,
					&:disabled,
					&[disabled],
					&.sui-button-onload,
					&.sui-button-onload-text {
						border-color: $button-disabled--background;
					}
				}
			}
		}

		// DESIGN: Filled
		&.sui-button-filled {
			background-color: map-get($button-icon--background-filled, default);
			color: map-get($button-icon--color-filled, default);

			&:hover,
			&:focus,
			&.sui-active {
				background-color: darken(map-get($button-icon--background-filled, default), 8%);
			}

			&:focus {
				outline: none;
				box-shadow: 0 0 0 2px map-get($button-icon--shadow, default);
			}

			&.disabled,
			&:disabled,
			&[disabled],
			&.sui-button-onload,
			&.sui-button-onload-text {
				background-color: $button-disabled--background;
				color: $button-disabled--color;
			}

			@each $color in $button-colors {

				&.sui-button-#{"" + $color} {
					background-color: map-get($button-icon--background-filled, $color);
					color: map-get($button-icon--color-filled, $color);

					&:hover,
					&:focus,
					&.sui-active {
						background-color: darken(map-get($button-icon--background-filled, $color), 10%);
					}

					&:focus {
						outline: none;
						box-shadow: 0 0 0 2px map-get($button-icon--shadow, $color);
					}

					&.disabled,
					&:disabled,
					&[disabled],
					&.sui-button-onload,
					&.sui-button-onload-text {
						background-color: $button-disabled--background;
						color: $button-disabled--color;
					}
				}
			}
		}

		// SIZE: Large
		&.sui-button-lg {
			width: 50px;
			height: 40px;

			[class*="sui-icon-"] {
				font-size: 13px;
			}
		}
	}

	// FIX: Dropdown button
	// Remove margin when using sui-buttons inside dropdown element
	.sui-dropdown {

		.sui-button,
		a.sui-button,
		button.sui-button {

			&, &-icon {

				&:not(:last-child) {
					margin-right: 0;
				}
			}
		}
	}
}

@include body-class(true, true) {
	// VARIATION: Buttons with text
	.sui-button,
	a.sui-button,
	button.sui-button {
		[class*="sui-icon-"] {

			&:not(.sui-loading) {
				margin-left: 0;
    			margin-right: -7px;
			}
		}

		// VARIATION: Button with right icon
		&.sui-button-icon-right {

			[class*="sui-icon-"] {

				&:not(.sui-loading) {
					margin-right: 0;
					margin-left: -7px;
				}
			}
		}
	}
}