@use "../kit-deps" as *;
@use "typography" as *;

@keyframes icon_spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: $control-height-md;
	font-family: $font-family-base;
	font-size: $font-size-base;
	font-weight: $font-weight-semibold;
	line-height: $line-height-base;
	letter-spacing: $letter-spacing-wide;
	padding: $space-3 $space-lg;
	border-radius: 0;
	border-width: $border-width-base;
	border-left-width: $border-width-accent;
	border-style: $border-style-base;
	border-color: $color-primary;
	text-transform: uppercase;
	background-color: transparent;
	cursor: pointer;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: background-color, border-color, color, opacity;

	&:focus-visible {
		@include focus_ring;
	}

	&.with-icon {
		border-left-width: $control-icon-rail-md;
		position: relative;

		.ph,
		.ph-bold {
			position: absolute;
			color: $color-black;
			left: -$control-icon-rail-md;
			top: 1px;
			font-size: $icon-size-lg;
			height: 100%;
			display: inline-flex;
			align-items: center;
			width: $control-icon-rail-md;
			justify-content: center;
			transition-duration: .2s;
			transition-property: color, left;
		}
	}

	@include hover_touch {
		&.with-icon:not(.loading-state):not(.btn-small) {
			.ph,
			.ph-bold {
				left: -($control-icon-rail-md - $space-5);
			}
		}
	}

	&.btn-primary {
		color: $color-primary;
		border-color: $color-primary;

		@include hover_touch {
			background-color: $color-primary;
			color: $color-black;
		}
	}

	&.btn-secondary {
		color: $color-secondary;
		border-color: $color-secondary;

		@include hover_touch {
			background-color: $color-secondary;
			color: $color-black;

			&.with-icon {
				.ph,
				.ph-bold {
					color: $color-black;
				}
			}
		}
	}

	&.btn-accent {
		color: $color-accent;
		border-color: $color-accent;

		@include hover_touch {
			background-color: $color-accent;
			color: $color-black;

			&.with-icon {
				.ph,
				.ph-bold {
					color: $color-black;
				}
			}
		}
	}

	&.btn-danger {
		color: $color-error;
		border-color: $color-error;

		@include hover_touch {
			background-color: $color-error;
			color: $color-black;
		}
	}

	&.btn-warning {
		color: $color-warning;
		border-color: $color-warning;

		@include hover_touch {
			background-color: $color-warning;
			color: $color-black;
		}
	}

	&.btn-success {
		color: $color-success;
		border-color: $color-success;

		@include hover_touch {
			background-color: $color-success;
			color: $color-black;
		}
	}

	&.btn-info {
		color: $color-info;
		border-color: $color-info;

		@include hover_touch {
			background-color: $color-info;
			color: $color-black;

			&.with-icon {
				.ph,
				.ph-bold {
					color: $color-black;
				}
			}
		}
	}

	&[disabled]:not(.loading-state) {
		color: $color-text-dark;
		border-color: $border-color-muted;
		background-color: $surface-panel;
		cursor: not-allowed;
		opacity: 0.72;

		&.with-icon {
			.ph,
			.ph-bold {
				color: $color-text-dark;
			}
		}

		@include hover_touch {
			background-color: $color-dark;
			color: $color-text-dark;

			&.with-icon {
				.ph,
				.ph-bold {
					color: $color-text-dark;
				}
			}
		}

		&.with-icon:not(.btn-small) {
			.ph,
			.ph-bold {
				left: -($control-icon-rail-md - $space-5);
			}
		}
	}

	&.btn-small {
		font-size: $font-size-sm;
		font-weight: $font-weight-medium;
		min-height: $control-height-sm;
		padding: $space-sm $space-sm;

		&.with-icon {
			border-left-width: $control-icon-rail-sm;

			.ph,
			.ph-bold {
				top: 0;
				left: -($control-icon-rail-sm + $space-2);
				font-size: $icon-size-md;
			}

			&.loading-state {
				.ph, .ph-bold {
					font-size: $icon-size-lg;
				}
			}
		}
	}

	&.btn-large {
		font-size: $font-size-lg;
		font-weight: $font-weight-bold;
		min-height: $control-height-lg;
		padding: $space-md $space-xxl;
	}

	&.loading-state {
		color: $color-black !important;
		border-color: $color-primary !important;
		background-color: $color-primary !important;

		.ph, .ph-bold {
			font-size: $icon-size-lg;
			transform-origin: 50% 50%;
  		animation: icon_spin 1.2s linear infinite;
		}
	}
}

.btn-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: $control-height-sm;
	height: $control-height-sm;

	background: transparent;
	color: $color-text-light;
	font-size: $icon-size-md;
	border: $border-width-base solid transparent;
	cursor: pointer;

	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: color, background, border-color;

	&:focus-visible {
		@include focus_ring;
	}

	
	.ph {
		transform: rotate(0);
		transition-duration: .2s;
		transition-property: transform;
	}

	&:not(.without-hover) {
		@include hover_touch {
			color: $color-warning;
			border-color: $color-warning;

			.ph {
				transform: rotate(90deg);
			}
		}
	}
}