@use '@talend/design-tokens/lib/tokens' as tokens;

@mixin button-affix-styles() {
	color: tokens.$coral-color-accent-text;
	background: tokens.$coral-color-accent-background;
	cursor: pointer;

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

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

	&:disabled {
		color: tokens.$coral-color-neutral-text-weak;
		background: tokens.$coral-color-neutral-background-strong;
		cursor: not-allowed;
	}
}

@mixin base-affix-styles() {
	display: inline-flex;
	flex-grow: 1;
	flex-shrink: 0;
	color: tokens.$coral-color-neutral-text;
	background: tokens.$coral-color-neutral-background-strong;
	padding: 0 tokens.$coral-spacing-xs;
	justify-content: center;
	align-items: center;
	font: tokens.$coral-paragraph-m;
	border: 0;
	height: 100%;
	min-height: auto;
	max-height: tokens.$coral-sizing-m;
	transition: tokens.$coral-transition-fast;
	border-radius: 2px 0 0 2px;
	border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;


	&_isSuffix {
		border-radius: 0 2px 2px 0;
		border-right: 0;
		border-left: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
	}

	&__icon {
		width: tokens.$coral-sizing-xxxs;
		height: tokens.$coral-sizing-xxxs;
		display: flex;
		justify-content: center;
		align-items: center;

		// Force legacy icon sizes
		> svg {
			width: tokens.$coral-sizing-minimal;
			height: tokens.$coral-sizing-minimal;
		}
	}

	&__caret {
		width: tokens.$coral-sizing-minimal;
		height: tokens.$coral-sizing-minimal;
		display: flex;
		justify-content: center;
		align-items: center;

		// Force legacy icon sizes
		> svg {
			width: tokens.$coral-sizing-minimal;
			height: tokens.$coral-sizing-minimal;
		}
	}
}

.affix {
	@include base-affix-styles();


	&.button {
		@include button-affix-styles();
	}
}