$crc: '.h-icon-button';

#{$crc} {
	border-radius: $v-control-border-radius;
	padding: 0;
	background: transparent;
	transition: color $t-fast-standard, background $t-fast-standard, border-color $t-fast-standard, box-shadow $t-fast-standard;
	outline: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	position: relative;

	--button-text-color: #{$c-default-text};

	svg {
		transition: $t-fast-standard;
	}

	&.-styling-subtle {
		border: none;

		&.-color-primary {
			--button-text-color: #{$c-primary-text};

			&:hover, &:focus {
				background: rgba($c-primary-border, $o-48);
				box-shadow: $sd-hover--primary-box-shadow;
			}
			&:active { --button-text-color: #{$c-active--primary-text}; }
			&:disabled {
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-negative {
			--button-text-color: #{$c-negative-text};

			&:hover, &:focus {
				background: rgba($c-negative-border, $o-48);
				box-shadow: $sd-hover--negative-box-shadow;
			}
			&:active { --button-text-color: #{$c-active--negative-text}; }
			&:disabled {
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-success {
			--button-text-color: #{$c-success-text};

			&:hover, &:focus {
				background: rgba($c-success-border, $o-48);
				box-shadow: $sd-hover--success-box-shadow;
			}
			&:active { --button-text-color: #{$c-active--success-text}; }
			&:disabled {
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-warning {
			--button-text-color: #{$c-warning-text};

			&:hover, &:focus {
				background: rgba($c-warning-border, $o-48);
				box-shadow: $sd-hover--warning-box-shadow;
			}
			&:active { --button-text-color: #{$c-active--warning-text}; }
			&:disabled {
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-danger {
			--button-text-color: #{$c-danger-text};

			&:hover, &:focus {
				background: rgba($c-danger-border, $o-48);
				box-shadow: $sd-hover--danger-box-shadow;
			}
			&:active { --button-text-color: #{$c-active--danger-text}; }
			&:disabled {
				--button-text-color: #{$c-dark-text};
			}
		}
	}

	&.-styling-simple {
		border-width: $v-control-border-width;
		border-style: solid;

		&.-color-primary {
			--button-text-color: #{$c-primary-text};
			background: $c-primary-background;
			border-color: $c-primary-border;

			&:hover, &:focus {
				border-color: $c-hover--primary-border;
				box-shadow: $sd-hover--primary-box-shadow;
			}
			&:active {
				--button-text-color: #{$c-active--primary-text};
				border-color: $c-active--primary-border;
				box-shadow: $sd-active--primary-box-shadow;
			}
			&:disabled {
				background: $c-disabled--primary-background;
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-negative {
			--button-text-color: #{$c-negative-text};
			background: $c-negative-background;
			border-color: $c-negative-border;

			&:hover, &:focus {
				border-color: $c-hover--negative-border;
				box-shadow: $sd-hover--negative-box-shadow;
			}
			&:active {
				--button-text-color: #{$c-active--negative-text};
				border-color: $c-active--negative-border;
				box-shadow: $sd-active--negative-box-shadow;
			}
			&:disabled {
				background: $c-disabled--negative-background;
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-success {
			--button-text-color: #{$c-success-text};
			background: $c-success-background;
			border-color: $c-success-border;

			&:hover, &:focus {
				border-color: $c-hover--success-border;
				box-shadow: $sd-hover--success-box-shadow;
			}
			&:active {
				--button-text-color: #{$c-active--success-text};
				border-color: $c-active--success-border;
				box-shadow: $sd-active--success-box-shadow;
			}
			&:disabled {
				background: $c-disabled--success-background;
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-warning {
			--button-text-color: #{$c-warning-text};
			background: $c-warning-background;
			border-color: $c-warning-border;

			&:hover, &:focus {
				border-color: $c-hover--warning-border;
				box-shadow: $sd-hover--warning-box-shadow;
			}
			&:active {
				--button-text-color: #{$c-active--warning-text};
				border-color: $c-active--warning-border;
				box-shadow: $sd-active--warning-box-shadow;
			}
			&:disabled {
				background: $c-disabled--warning-background;
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-danger {
			--button-text-color: #{$c-danger-text};
			background: $c-danger-background;
			border-color: $c-danger-border;

			&:hover, &:focus {
				border-color: $c-hover--danger-border;
				box-shadow: $sd-hover--danger-box-shadow;
			}
			&:active {
				--button-text-color: #{$c-active--danger-text};
				border-color: $c-active--danger-border;
				box-shadow: $sd-active--danger-box-shadow;
			}
			&:disabled {
				background: $c-disabled--danger-background;
				--button-text-color: #{$c-dark-text};
			}
		}
	}

	&.-styling-block {
		border-width: $v-control-border-width;
		border-style: solid;

		&.-color-primary {
			--button-text-color: #{$c-fill};
			background: $c-primary;
			border-color: $c-primary;

			&:hover, &:focus {
				border-color: $c-dark-primary;
				box-shadow: $sd-hover--primary-box-shadow;
			}
			&:active {
				border-color: $c-active--primary-border;
				box-shadow: $sd-active--primary-box-shadow;
			}
			&:disabled {
				border-color: $c-primary-border;
				background: $c-disabled--primary-background;
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-negative {
			--button-text-color: #{$c-fill};
			background: $c-negative;
			border-color: $c-negative;

			&:hover, &:focus {
				border-color: $c-dark-negative;
				box-shadow: $sd-hover--negative-box-shadow;
			}
			&:active {
				border-color: $c-active--negative-border;
				box-shadow: $sd-active--negative-box-shadow;
			}
			&:disabled {
				border-color: $c-negative-border;
				background: $c-disabled--negative-background;
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-success {
			--button-text-color: #{$c-fill};
			background: $c-success;
			border-color: $c-success;

			&:hover, &:focus {
				border-color: $c-dark-success;
				box-shadow: $sd-hover--success-box-shadow;
			}
			&:active {
				border-color: $c-active--success-border;
				box-shadow: $sd-active--success-box-shadow;
			}
			&:disabled {
				border-color: $c-success-border;
				background: $c-disabled--success-background;
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-warning {
			--button-text-color: #{$c-fill};
			background: $c-warning;
			border-color: $c-warning;

			&:hover, &:focus {
				border-color: $c-dark-warning;
				box-shadow: $sd-hover--warning-box-shadow;
			}
			&:active {
				border-color: $c-active--warning-border;
				box-shadow: $sd-active--warning-box-shadow;
			}
			&:disabled {
				border-color: $c-warning-border;
				background: $c-disabled--warning-background;
				--button-text-color: #{$c-dark-text};
			}
		}

		&.-color-danger {
			--button-text-color: #{$c-fill};
			background: $c-danger;
			border-color: $c-danger;

			&:hover, &:focus {
				border-color: $c-dark-danger;
				box-shadow: $sd-hover--danger-box-shadow;
			}
			&:active {
				border-color: $c-active--danger-border;
				box-shadow: $sd-active--danger-box-shadow;
			}
			&:disabled {
				border-color: $c-danger-border;
				background: $c-disabled--danger-background;
				--button-text-color: #{$c-dark-text};
			}
		}
	}

	&.-styling-none {
		background: transparent;
		border-color: transparent;

		&.-color-primary {
			--button-text-color: #{$c-primary-text};
			&:active { --button-text-color: #{$c-active--primary-text}; }
			&:disabled { --button-text-color: #{$c-dark-text}; }
		}

		&.-color-negative {
			--button-text-color: #{$c-negative-text};
			&:active { --button-text-color: #{$c-active--negative-text}; }
			&:disabled { --button-text-color: #{$c-dark-text}; }
		}

		&.-color-success {
			--button-text-color: #{$c-success-text};
			&:active { --button-text-color: #{$c-active--success-text}; }
			&:disabled { --button-text-color: #{$c-dark-text}; }
		}

		&.-color-warning {
			--button-text-color: #{$c-warning-text};
			&:active { --button-text-color: #{$c-active--warning-text}; }
			&:disabled { --button-text-color: #{$c-dark-text}; }
		}

		&.-color-danger {
			--button-text-color: #{$c-danger-text};
			&:active { --button-text-color: #{$c-active--danger-text}; }
			&:disabled { --button-text-color: #{$c-dark-text}; }
		}
	}

	&.-size-normal {
		min-width: $v-control-height;
		height: $v-control-height;
		line-height: $v-control-height;
	}

	&.-size-small {
		min-width: $v-control-height-small;
		height: $v-control-height-small;
		line-height: $v-control-height-small;
	}

	&.-size-large {
		min-width: $v-control-height-large;
		height: $v-control-height-large;
		line-height: $v-control-height-large;
	}

	&.-loading {
		pointer-events: none;

		#{$crc}__loading-container {
			opacity: $o-100;
		}

		#{$crc}__icon {
			opacity: $o-0;
		}
	}

	&.-rounded {
		border-radius: 50%;
	}

	// Shared for all types
	&:disabled {
		opacity: $v-control-disabled-opacity;
		pointer-events: none;
	}
}

#{$crc}__content {
	color: var(--button-text-color);
	display: flex;
	align-items: center;
	position: relative;
}

#{$crc}__icon {
	color: var(--button-text-color);
}

#{$crc}__icon {
	vertical-align: sub;
	opacity: 1;
	margin-right: 0;
	transition: opacity $t-fast-standard;
}

#{$crc}__loading-container {
	width: 16px;
	height: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	opacity: $o-0;
}

#{$crc}__loading-spinner {
	width: 12px;
	height: 12px;
	border-width: 3px;
	border-style: solid;
	border-color: var(--button-text-color);
	border-right-color: transparent;
	border-bottom-color: transparent;
	box-sizing: border-box;
	border-radius: 50%;
	animation: h-icon-button__loading-spinner-rotate 1500ms cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite;
	transition: border-color $t-medium-standard;
}

#{$crc}__loading-container, #{$crc}__icon {
	transition: $t-medium-standard;
}


@keyframes h-icon-button__loading-spinner-rotate {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}