// Colors
$bgColorGray: #f4f8f9;
$bgColorHoverGray: #dae7eb;
$colorBorder: #bfccd4;

.kit-button {
	$self: &;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0 23px;
	border: 1px solid $colorBorder;
	border-radius: 4px;
	outline: none;
	box-sizing: border-box;
	font-family: Inter, sans-serif;
	transition: color 0.15s, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out;
	cursor: pointer;

	svg {
		margin-right: 5px;
	}

	&:disabled {
		opacity: 0.35;
		cursor: auto;
	}

	&:hover:not(:disabled),
	&:focus:not(:disabled) {
		background-color: #c1d0dc;
	}

	&_color-gray {
		background-color: $bgColorGray;
		color: #000000;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			background-color: $bgColorHoverGray;
		}
	}

	&_color-lightgray {
		background-color: #f2f2f2;
		color: #265378;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			background-color: darken($color: #f2f2f2, $amount: 8%);
			color: darken($color: #265378, $amount: 18%);
		}
	}

	&_color-silver {
		background-color: #f1f5f8;
		color: #265378;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			background-color: #e2eaf0;
		}
	}

	&_size-xxs {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
		padding: 2px 12px;
		border-radius: 6px;
		font-size: 12px;
		line-height: 16px;
	}

	&_size-xs {
		min-height: 23px;
		font-size: 12px;
		line-height: 20px;
	}

	&_size-small {
		min-height: 24px;
		font-size: 14px;
		line-height: 21px;
	}

	&_size-medium {
		min-height: 28px;
		font-size: 13px;
		line-height: 25px;
	}

	&_size-normal {
		min-height: 32px;
		font-size: 14px;
		line-height: 29px;
	}

	&_size-large {
		min-height: 38px;
		font-size: 16px;
		line-height: 35px;
	}

	&_size-large:disabled {
		opacity: 0.5;
		color: #e2eaf0;
		cursor: default;
	}

	&_hasBorder {
		border-color: #8aacc2;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			border-color: #5897fb;
		}

		&#{ $self }_color-silver {
			border-color: #c7d8e2;
		}
	}

	&_danger {
		background-color: rgba(255, 240, 238, 0.5);
		border-color: #a12e1e;
		color: #a12e1e;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			background-color: darken(
				$color: rgba(255, 240, 238, 0.5),
				$amount: 8%
			);
			border-color: darken($color: #a12e1e, $amount: 18%);
			color: darken($color: #a12e1e, $amount: 18%);
		}
	}

	&_whith-arrow {
		&::after,
		&::before {
			display: inline-block;
			margin-top: 1px;
		}

		&_left::before {
			content: "←";
			margin-right: 4px;
		}

		&_right::after {
			content: "→";
			margin-left: 4px;
		}
	}

	&_inherit-font {
		font-size: inherit;
		vertical-align: baseline;
	}

	&_has-icon {
		padding-right: 24px;
	}

	&_simple_text {
		width: auto;
		min-width: 0;
		height: auto;
		min-height: 0;
		padding: 0;
		background-color: transparent;
		color: #265378;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			background-color: transparent;
		}
	}
}

.kit-button__text {
	display: inline-flex;
	align-items: center;
}

.kit-button__text_hasUnderline {
	border-bottom: 1px dashed #265378;
	color: #265378;
}

.kit-button__icon {
	width: 18px;
	max-width: 18px;
	height: 18px;
	max-height: 18px;
	margin-top: -2px;
	margin-right: 4px;
	margin-left: -10px;
	transform: scale(0.9);
}