.bx-im-elements-loader__container {
	position: relative;
}

.bx-im-elements-spinner__scope {
	--im-elements-spinner__border-color_spinner-blue: #00ace3;
	--im-elements-spinner__border-color_spinner-grey: #c0c3c8;
	--im-elements-spinner__border-color_spinner-copilot: #8e52ec;
}

.bx-im-elements-spinner__container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 0 auto;
}

.bx-im-elements-spinner__spinner {
	opacity: 0.2;
	border-radius: 50%;
	border-style: solid;
	border-color:
		var(--im-elements-spinner__border-color_spinner-blue)
		var(--im-elements-spinner__border-color_spinner-blue)
		var(--im-elements-spinner__border-color_spinner-blue)
		transparent
;
	animation: spinner-animation 1s infinite linear;
}

.bx-im-elements-spinner__spinner.--color-grey {
	opacity: 1;
	border-top-color: var(--im-elements-spinner__border-color_spinner-grey);
	border-right-color: var(--im-elements-spinner__border-color_spinner-grey);
	border-bottom-color: var(--im-elements-spinner__border-color_spinner-grey);
}

.bx-im-elements-spinner__spinner.--color-copilot {
	opacity: 1;
	border-top-color: var(--im-elements-spinner__border-color_spinner-copilot);
	border-right-color: var(--im-elements-spinner__border-color_spinner-copilot);
	border-bottom-color: var(--im-elements-spinner__border-color_spinner-copilot);
}

.bx-im-elements-spinner__spinner.--size-xxs {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

.bx-im-elements-spinner__spinner.--size-xs {
	width: 22px;
	height: 22px;
	border-width: 2px;
}

.bx-im-elements-spinner__spinner.--size-s {
	width: 60px;
	height: 60px;
	border-width: 4px;
}

.bx-im-elements-spinner__spinner.--size-l {
	width: 106px;
	height: 106px;
	border-width: 5px;
}

@keyframes spinner-animation {
	to {
		transform: rotate(1turn)
	}
}

.bx-im-elements-line-loader__container {
	width: 50px;
	height: 16px;
	display: flex;
	align-items: center;
}

.bx-im-elements-line-loader__content {
	position: relative;

	width: 100%;
	height: 5px;
	border-radius: 98px;
	overflow: hidden;
}
.bx-im-elements-line-loader__content::after {
	content: '';
	width: 40%;
	height: 5px;
	background: var(--im-color-palette-gray-10);
	position: absolute;
	top: calc(50% - 3px);
	left: 0;
	border-radius: 10px;
	animation: line-loader 1s ease-in-out infinite;
}

@keyframes line-loader {
	0% {
		left: 0;
		transform: translateX(-100%);
	}
	100% {
		left: 100%;
		transform: translateX(0);
	}
}