Your IP : 216.73.216.86

Current Path : /var/www/homesaver/www/bitrix/js/ui/image-stack-steps/dist/
Upload File :
Current File : /var/www/homesaver/www/bitrix/js/ui/image-stack-steps/dist/image-stack-steps.bundle.css

.ui-image-stack-steps {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.ui-image-stack-steps {
	--ui-background-dark-grey: #7b8691;
}

.ui-image-stack-steps-step {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-right: 24px;
	min-width: 68px;
	height: auto;
	z-index: 1;
}

.ui-image-stack-steps-step.--with-header.--with-footer {
	height: 76px;
}

.ui-image-stack-steps-step:before {
	content: '';
	position: absolute;
	top: 52%;
	left: 0;
	height: 1px;
	width: calc(100% + 24px) ;
	background: var(--ui-color-base-10);
	transform: translateY(-50%);
	z-index: -1;
}

.ui-image-stack-steps-step:first-child:before {
	left: 25px;
}

.ui-image-stack-steps-step:last-child:before {
	/*left: -25px;*/
	width: calc(100% - 25px);
}

.ui-image-stack-steps-step:only-child:before {
	display: none;
}

.ui-image-stack-steps .ui-image-stack-steps-step:last-child:not(:last-child:has(.ui-image-stack-steps-step-progress-box)) {
	margin-right: 0;
}

.ui-image-stack-steps-step-progress-box {
	position: absolute;
	top: 52%;
	right: -20px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16px;
	height: 12px;
	transform: translateY(-50%);
}

.ui-image-stack-steps-step-progress-box__icon {
	position: relative;
	z-index: 2;
}

.ui-image-stack-steps-step-progress-box__icon-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 12px;
	border-radius: var(--ui-border-radius-lg);
	background: var(--ui-color-base-10);
}

.ui-image-stack-steps-header {
	margin-bottom: 8px;
	max-width: 75px;
}

.ui-image-stack-steps-step-stack {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 32px;
	height: 32px;
}

.ui-image-stack-steps-footer {
	margin-top: 5px;
	max-width: 75px;
}

.ui-image-stack-steps-text {
	color: var(--ui-color-base-50);
	font-size: var(--ui-font-size-3xs);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.ui-image-stack-steps-text-skeleton-area {
	display: block;
	width: 40px;
	height: 13px;
	align-content: center;
}

.ui-image-stack-steps-text-skeleton-area-stub {
	display: block;
	height: 6px;
	background: var(--ui-color-base-10);
	border-radius: var(--ui-border-radius-lg);
	margin-top: 2px;
}

.ui-image-stack-steps-step-stack-status {
	display: block;
	position: absolute;
	top: -8px;
	right: -4px;
	width: 18px;
	height: 18px;
	z-index: 2;
}

.ui-image-stack-steps-step-stack-status-icon {
	position: absolute;
	z-index: 2;
}

.ui-image-stack-steps-step-stack-status-icon__overlay {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: var(--ui-border-radius-circle);
	background: var(--ui-color-palette-white-base);
	z-index: 0;
}



.ui-image-stack-steps-image {
	display: inline-block;
	min-width: 30px;
	height: 30px;
	border-radius: var(--ui-border-radius-circle);
	border: 1px solid var(--ui-color-background-primary);
	background-color: var(--ui-color-background-primary);
	background-size: cover;
	box-sizing: border-box;
	margin-right: -15px;
	position: relative;
}

.ui-image-stack-steps-image:last-child {
	margin-right: 0;
}

.ui-image-stack-steps-image.--image-stub {
	background: var(--ui-color-base-10);
	display: flex;
	justify-content: center;
	align-items: center;
}

.ui-image-stack-steps-image.--user {
	background-color: var(--ui-background-dark-grey);
	background-image: url(/bitrix/js/ui/icons/b24/images/ui-user.svg?v2);
}

.ui-image-stack-steps-image.--icon {
	background: var(--ui-color-palette-white-base);
	border: 1px solid var(--ui-color-base-10);
	display: flex;
	justify-content: center;
	align-items: center;
}

.ui-image-stack-steps-counter {
	display: inline-block;
	min-width: 30px;
	height: 30px;
	border-radius: var(--ui-border-radius-circle);
	border: 1px solid var(--ui-color-palette-blue-25);
	background-color: var(--ui-color-background-primary);
	background-size: cover;
	box-sizing: border-box;
	margin-right: -15px;
	position: relative;
	line-height: 28px;
	color: var(--ui-color-palette-blue-70);
	font-size: var(--ui-font-size-xs);
	font-weight: var(--ui-font-weight-normal);
	text-align: center;
}