@import "./variables.less";
@import (reference) "../../icon/style/variables.less";

.@{btn-prefix} {
	.appearance();
	.touch-action();
	.user-select();
	.outline();

	position: relative;
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: @btn-padding-y;
	min-width: 76px;
	height: @btn-height;
	margin: 0;
	padding-block: @btn-padding-y;
	padding-inline: @btn-padding-x;
	background-color: var(--btn-bg);
	border: @btn-border-width @btn-border-style var(--btn-border);
	border-radius: @btn-border-radius;
	font: inherit;
	letter-spacing: inherit;
	font-feature-settings: inherit;
	font-size: @font-size-medium;
	color: var(--btn-color);
	font-weight: @font-weight-semiBold;
	text-align: left;
	white-space: nowrap;
	vertical-align: inherit;
	cursor: pointer;
	transition: @transition-speed-fast @transition-easing;
	transition-property: outline, color, background-color, border, transform;
	z-index: 1;

	&:hover,
	&:focus {
		background-color: var(--btn-bg-hover);
		border-color: var(--btn-border-hover);
	}

	&:active {
		background-color: var(--btn-bg-active);
		border-color: var(--btn-border-active);
	}

	& .@{icon-prefix} {
		font-size: @font-size-large;
		transform: translateZ(0);
	}

	&-icon-only {
		min-width: 0;
		width: @btn-height;
		padding: @btn-padding-icon;
	}

	&-primary {
		color: var(--btn-color-primary);
		background-color: var(--btn-bg-primary);
		border-color: var(--btn-bg-primary);

		&:hover,
		&:focus {
			background-color: var(--btn-bg-primary-hover);
			border-color: var(--btn-bg-primary-hover);
		}

		&:active {
			background-color: var(--btn-bg-primary-active);
			border-color: var(--btn-bg-primary-active);
		}
	}

	&-complementary {
		color: var(--btn-color-complementary);
		background-color: var(--btn-bg-complementary);
		border-color: var(--btn-bg-complementary);

		&:hover,
		&:focus {
			background-color: var(--btn-bg-complementary-hover);
			border-color: var(--btn-bg-complementary-hover);
		}

		&:active {
			background-color: var(--btn-bg-complementary-active);
			border-color: var(--btn-bg-complementary-active);
		}
	}

	&-muted {
		color: var(--btn-color-muted);
		background-color: var(--btn-bg-muted);
		border-color: transparent;

		&:hover,
		&:focus {
			background-color: var(--btn-bg-muted-hover);
			border-color: transparent;
		}

		&:active {
			background-color: var(--btn-bg-muted-active);
			border-color: transparent;
		}
	}

	&-link {
		background-color: transparent;
		border-color: transparent;
		color: var(--primary);
		text-decoration: underline;

		&:hover,
		&:focus {
			background-color: transparent;
			border-color: transparent;
			color: var(--primary-hover);
		}

		&:active {
			background-color: transparent;
			border-color: transparent;
			color: var(--primary-active);
		}
	}

	&-text {
		background-color: transparent;
		border-color: transparent;

		&:hover,
		&:focus {
			background-color: var(--transparent-hover);
			border-color: transparent;
		}

		&:active {
			background-color: var(--transparent-active);
			border-color: transparent;
		}
	}

	&-light {
		background-color: var(--transparent);
		border-color: transparent;

		&:hover,
		&:focus {
			background-color: var(--transparent-hover);
			border-color: transparent;
		}

		&:active {
			background-color: var(--transparent-active);
			border-color: transparent;
		}
	}

	&-border {
		&,
		&:hover,
		&:focus,
		&:active {
			background-color: transparent;
		}

		&-primary {
			color: var(--primary);
			background-color: transparent;
			border-color: var(--primary);

			&:hover,
			&:focus {
				color: var(--primary-hover);
				background-color: transparent;
				border-color: var(--primary-hover);
			}

			&:active {
				color: var(--primary-active);
				background-color: transparent;
				border-color: var(--primary-active);
			}
		}
	}

	&-round {
		border-radius: @btn-border-radius-round;
	}

	&-pill {
		border-radius: @btn-border-radius-pill;
	}

	&-circle {
		border-radius: @btn-border-radius-circle;
	}

	&-loading {
		cursor: wait;
	}

	&-dashed {
		border-style: dashed;
	}

	&-block {
		width: 100%;
		text-align: center;
	}

	&-group {
		white-space: nowrap;

		& .@{btn-prefix} {

			&:hover,
			&:focus {
				z-index: 2;
			}

			&:first-child {
				border-start-end-radius: 0;
				border-end-end-radius: 0;
			}

			& + .@{btn-prefix} {
				margin-inline-start: calc(@btn-border-width * -1);

				&:last-child {
					border-start-start-radius: 0;
					border-end-start-radius: 0;
				}

				&:not(:last-child) {
					border-radius: 0;
				}
			}
		}
	}

	&:is([disabled], :disabled) {
		&,
		&:hover,
		&:focus,
		&:active {
			background-color: var(--btn-bg-disabled);
			border-color: var(--btn-border-disabled);
			color: var(--btn-color-disabled);
			cursor: not-allowed;
		}
	}
}