@use "../../_base";
@use "../../_mixins";

/* Structure flex */
.CriteriaGroup {
	border: 1px solid #ddd;
	display: flex;
	position: relative;
	border-radius: 5px;
	background: #fff;
	margin-top: base.$margin-component;
	margin-bottom: base.$margin-component-onEdit;
	padding: 2px 0 2px 5px;
	clear: both;
	-moz-box-shadow: 0px 2px 3px 0px #cfcfcf;
	-webkit-box-shadow: 0px 2px 3px 0px #cfcfcf;
	-o-box-shadow: 0px 2px 3px 0px #cfcfcf;
	box-shadow: 0px 2px 3px 0px #cfcfcf;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=180, Strength=3);


	.flexWrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.componentBackArrow svg {
		height: 48px;

		path {
			fill: transparent;
			stroke: transparent;
			stroke-width: 2.5px;
		}
	}

	.componentFrontArrow svg {
		height: 48px;

		path {
			fill: transparent;
			stroke: var(--silver-color-light);
			stroke-width: 3px;
		}

		rect {
			fill: #fff;
		}
	}

	&.optionalEnabled {
		border: 3px dashed var(--primary-color-main);
	}

	&.notExistsEnabled {
		border: 3px dashed #000;
	}

	&.serviceEnabled {
		border: 3px dashed var(--ternary-color-main);
	}
	
	/* Unselect to graphique  */
	span.unselect {
		/*position: absolute;*/
		display: block;
		position: absolute;
		top: 15px;
		right: 10px;
		width: 22px;
		height: 22px !important;
		padding: 0 0;
		text-align: center;
		cursor: pointer;
		color: var(--primary-color-important);
		line-height: 22px;
		font-size: 18px;
		box-sizing: border-box;
		border-radius: 11px;
		z-index: 2;
	}

	.currentWrapper {
        height: 48px;
        background: rgba(0, 0, 0, 0);
        border-color: rgba(0, 0, 0, 0);
        padding-left: 8px;
        padding-right: 12px;
        border-width: 0;
        border-top-width: 3px;
        border-bottom-width: 3px;
        border-top: 3px solid #fff;
        border-bottom: 3px solid #fff;

		span.current {
			display: inline-block;
			height: 42px;
			line-height: 42px;
			vertical-align: bottom;
			white-space: nowrap;
			opacity: 0.6;
			background-color: var(--primary-color-light) ;
			padding: 0 14px;
			&:not(:has(span.label)) {

				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			span {
				display: inline-block;
				vertical-align: middle;
				min-width: 20px;
			}
			
			&>span.label {
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&.selected {
				background-color: #fff; 
				opacity: 1;
				padding: 0 0;
				color: var(--default-text-color);
				span i {
					font-size: 22px;
				}
			}
		}
    }
	
    .focus {
		.currentWrapper {
			span.current {
				min-width: 345px;
			}
		}
        &.selectorIsFlat { // -30px
            .currentWrapper span.current {
                min-width: 315px;
            }
        }
        &:not(.selectorHasIcon) { // -48px
            .currentWrapper span.current {
                min-width: 297px;
            }
        }
        &.selectorIsFlat:not(.selectorHasIcon) {// -48px -30px
            .currentWrapper span.current {
                min-width: 267px;
            }
        }
    }
    .VariableSelected .currentWrapper {
        color: var(--default-text-color);
        border-color: rgba(0, 0, 0, 0);
        border-radius: 0;
    }

	
	.ClassTypeId.Highlited .currentWrapper {
		border-radius: unset;
		background-color: var(--primary-color-main);
		border-color: #fff;
		.current {
			color: #fff;
			background-color: var(--primary-color-main);
		}
	}

	.StartClassGroup .ClassTypeId.Highlited .currentWrapper {
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	.ClassTypeId.Highlited.VariableSelected .currentWrapper {
		border-color: var(--secondary-color-important);
	}
	.StartClassGroup .ClassTypeId .currentWrapper {
		border-left: 3px solid #fff;
	}

    
}

/* When a value is selected or Where is enabled */
li.groupe.completed {
	&>.CriteriaGroup {
		margin-bottom: base.$margin-component;
	}
}