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

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

////
/// Action list
/// @group Custom widgets
////

$tc-action-list-item-width: 12.5rem !default;
$tc-action-list-item-icons-size: tokens.$coral-sizing-xxxs !default;
$tc-action-list-item-border-size: 0.125rem !default;

$action-list-background-color: tokens.$coral-color-branding-background;

.tc-action-list {
	display: inline-block;
	min-width: $tc-action-list-item-width;
	background-color: $action-list-background-color;

	.tc-action-list-item {
		:global {
			.tc-svg-icon {
				width: $tc-action-list-item-icons-size;
				height: $tc-action-list-item-icons-size;
				margin: 0;
			}

			.btn.btn-link {
				padding: $padding-normal;
				text-overflow: inherit;
				text-transform: none;

				> span {
					margin-left: $padding-normal;
					vertical-align: middle;
					transition: 0.1s opacity ease-out;
				}
			}
		}
	}
}