@import '../../../styles/containers.styles.scss';
@import '../../../styles/website-colors.styles.scss';

:host {
	display: flex;
	flex-direction: row;
	align-items: center;

	.actions-container,
	.actions-loader-container {
		width: 100%;
	}
	.actions-loader-container {
		display: flex;
		flex-direction: row;
		padding: 4px 0px;

		.icons-loader-container,
		.buttons-loader-container {
			width: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 8px;
		}
		.icons-loader-container {
			justify-content: flex-end;
		}
	}
	.skeleton {
		width: fit-content;
		display: flex;
		height: fit-content !important;
		::ng-deep .loader {
			height: 19px !important;
			margin-bottom: 0px !important;
			border-radius: 10px !important;
			opacity: 0.2;
			background-color: $color-medium-dark;
		}

		&.first {
			width: 141px !important;
			::ng-deep .loader {
				width: 141px !important;
				height: 30px !important;
				border-radius: 30px !important;
			}
		}
	}

	.circle {
		width: 24px !important;
		height: 24px !important;
		::ng-deep .loader {
			border-radius: 50% !important;
			width: 24px !important;
			height: 24px !important;
		}
	}
}

.custom-company-logo {
	width: 36px;
	margin-inline-end: 8px;
}

.actions-container {
	display: flex;
	flex-direction: row;
	align-items: center;
}
