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

$tc-status-icon-size: $svg-md-size !default;
$tc-status-action-min-size: 23px !default;
$tc-status-space-btn-icon-label: 5px !default;

.tc-status {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;

	&-icon {
		display: flex;

		> svg {
			width: $tc-status-icon-size;
			height: $tc-status-icon-size;
			margin-right: $tc-status-space-btn-icon-label;
		}

		&.info {
			color: tokens.$coral-color-info-icon;
		}

		&.success {
			color: tokens.$coral-color-success-icon;
		}

		&.danger {
			color: tokens.$coral-color-danger-icon;
		}

		&.muted {
			color: tokens.$coral-color-neutral-text-disabled;
		}

		&.warning {
			color: tokens.$coral-color-warning-icon;
		}
	}

	&-label {
		font-weight: 600;

		&.info {
			color: tokens.$coral-color-info-text;
		}

		&.success {
			color: tokens.$coral-color-success-text;
		}

		&.danger {
			color: tokens.$coral-color-danger-text;
		}

		&.muted {
			color: tokens.$coral-color-neutral-text-disabled;
		}

		&.warning {
			color: tokens.$coral-color-warning-text;
		}
	}

	&-actions {
		position: absolute;
		left: 0;
		opacity: 0;
	}

	&.action:hover,
	&.action:focus-within {
		.tc-status-icon,
		.tc-status-label {
			opacity: 0;
		}

		.tc-status-actions {
			opacity: 1;
		}
	}
}

.tc-status-skeleton-item {
	margin-right: $padding-small;
	display: flex;
}