@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

$tc-icon-toggle-size: 1.5rem !default;
$tc-icon-toggle-icon-size: $svg-sm-size !default;
$tc-icon-toggle-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border !default;
$tc-icon-toggle-tick-size: 12px !default;

@mixin tc-icon-toggle($btn-size: $tc-icon-toggle-size, $icon-size: $tc-icon-toggle-icon-size) {
	height: $btn-size;
	width: $btn-size;
	border-radius: calc(#{$btn-size} / 2);

	svg {
		height: $icon-size;
		width: $icon-size;
	}
}

.tc-icon-toggle {
	@include tc-icon-toggle;

	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: transparent;

	box-shadow: none;
	line-height: unset;
	min-height: auto;
	padding: 0;

	svg {
		color: tokens.$coral-color-neutral-icon-weak;
	}

	&,
	&:focus {
		border: $tc-icon-toggle-border;
	}

	&[disabled] {
		&:hover,
		&:focus {
			border-color: tokens.$coral-color-accent-text;

			svg {
				color: tokens.$coral-color-accent-text;
			}
		}
	}

	&:hover,
	&:active {
		box-shadow: none;
		border-color: tokens.$coral-color-accent-text;
		background-color: transparent;

		svg {
			color: tokens.$coral-color-accent-text;
		}
	}

	&.active {
		background-color: tokens.$coral-color-accent-background-strong;
		border-color: tokens.$coral-color-accent-background;

		svg {
			color: tokens.$coral-color-accent-text-weak;
		}

		&:hover:not([disabled]),
		&:active {
			background-color: tokens.$coral-color-accent-background-hover;
			border-color: tokens.$coral-color-accent-background-hover;

			svg {
				color: tokens.$coral-color-accent-text;
			}
		}
	}

	&.tick::after {
		content: '';
		position: absolute;
		width: $tc-icon-toggle-tick-size;
		height: $tc-icon-toggle-tick-size;
		border-radius: calc(#{$tc-icon-toggle-tick-size} / 2);
		right: -0.25rem;
		top: -0.25rem;
		background: tokens.$coral-color-accent-text;
		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
	}
}