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

$tc-icon-editable-text-size: 0.5rem !default;
$tc-circle-editable-text-size: 16px !default;

.tc-editable-text-form {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	padding-right: $padding-large;

	:global(.form-group) {
		width: 100%;
		margin: 0;
		padding-top: 0;
	}

	.tc-editable-text-form-input {
		width: 100%;
		padding-right: 2 * $tc-circle-editable-text-size + $padding-large;

		&::selection {
			background: tokens.$coral-color-accent-background;
		}
	}

	&-buttons {
		display: flex;
		position: absolute;
		align-items: center;
		justify-content: center;
		height: 32px;
		top: 0;
		right: $padding-larger;

		&-icon {
			border: 0.0625rem solid tokens.$coral-color-neutral-border;
			color: tokens.$coral-color-neutral-text-weak;
			width: $tc-circle-editable-text-size;
			height: $tc-circle-editable-text-size;
			min-height: auto;
			display: flex;
			border-radius: 50%;
			padding: 0;
			justify-content: center;
			align-items: center;

			> :global(.tc-svg-icon) {
				width: $tc-icon-editable-text-size;
				height: $tc-icon-editable-text-size;
			}

			&:last-child {
				margin-left: $padding-small;
			}
		}

		&-submit {
			border-color: tokens.$coral-color-success-border;
			background: tokens.$coral-color-success-background-strong;
			fill: tokens.$coral-color-success-text-weak;

			&:focus,
			&:hover {
				color: tokens.$coral-color-success-text-weak;
				background: tokens.$coral-color-success-background-strong-hover;
				border-color: tokens.$coral-color-success-border;

				svg {
					background: tokens.$coral-color-success-background-strong-hover;
				}
			}

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

		&-cancel:focus,
		&-cancel:hover {
			color: tokens.$coral-color-neutral-text;
			border-color: tokens.$coral-color-neutral-border-hover;
		}
	}
}