@charset "utf-8";

/** 엔티디 스타일 */
.pipeline g:has(ellipse.node-state){
	cursor: grab;
}

.pipeline g:has(ellipse.node-state.moving){
	cursor: grabbing;
}

.pipeline ellipse.node-state{
	fill : var(--color-main);
}

.pipeline g.disabled ellipse.node-state{
	fill : var(--color-sub-active);
}
.pipeline g.disabled text.node-state-text{
	text-decoration: line-through;
	font-family: 'NanumGothic';
}

.pipeline g ellipse.node-changed-border{
	fill : var(--color-red);
	opacity: 0;           /* 요소는 완전히 투명 */
	visibility: hidden;   /* 요소는 보이지 않음 */
	transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
}
.pipeline g.mark-as-changed ellipse.node-changed-border{
	opacity: 0.7;           /* 요소가 완전히 보이게 됨 */
	visibility: visible;  /* 요소가 보이게 됨 */
	transition: none;	  /* 즉시 나타남 */
}

.pipeline g ellipse.node-state-border{
	fill : var(--color-main-secondary);
	opacity: 0;           /* 요소는 완전히 투명 */
	visibility: hidden;   /* 요소는 보이지 않음 */
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.pipeline g.hover ellipse.node-state-border{
	opacity: 1;           /* 요소가 완전히 보이게 됨 */
	visibility: visible;  /* 요소가 보이게 됨 */
}
.pipeline g ellipse.node-state-border-bg{
	fill : rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}

.pipeline g ellipse.node-state-add-append{
	fill : var(--color-main);
	opacity: 0;           /* 요소는 완전히 투명 */
	visibility: hidden;   /* 요소는 보이지 않음 */
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;	
}

.pipeline g.hover ellipse.node-state-add-append{
	opacity: 1;           /* 요소는 완전히 투명 */
	visibility: visible;   /* 요소는 보이지 않음 */
}

.pipeline g use.node-state-add-append-icon{
	opacity: 0;           /* 요소는 완전히 투명 */
	visibility: hidden;   /* 요소는 보이지 않음 */
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;	
}

.pipeline g.hover use.node-state-add-append-icon{
	opacity: 1;           /* 요소는 완전히 투명 */
	visibility: visible;   /* 요소는 보이지 않음 */
}

.pipeline g ellipse.node-state-event-append{
	fill : var(--color-focus-primary);
	opacity: 0;           /* 요소는 완전히 투명 */
	visibility: hidden;   /* 요소는 보이지 않음 */
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;	
}

.pipeline g.hover ellipse.node-state-event-append{
	opacity: 1;           /* 요소는 완전히 투명 */
	visibility: visible;   /* 요소는 보이지 않음 */
}

.pipeline g use.node-state-event-append-icon{
	opacity: 0;           /* 요소는 완전히 투명 */
	visibility: hidden;   /* 요소는 보이지 않음 */
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;	
}

.pipeline g.hover use.node-state-event-append-icon{
	opacity: 1;           /* 요소는 완전히 투명 */
	visibility: visible;   /* 요소는 보이지 않음 */
}

.pipeline path.node-state-path{
	fill : transparent;
	stroke : var(--color-main-secondary);
	stroke-width: 2px;
}
.pipeline path.event-state-path{
	fill : transparent;
	stroke : var(--color-main-secondary);
	stroke-width: 2px;
}

.pipeline path.node-arrow{
	fill : var(--color-main-secondary);
}



/** 이벤트 스타일 */

.pipeline g:has(ellipse.event-state){
	cursor: grab;
}

.pipeline ellipse.event-state{
	fill : var(--color-focus-primary);
}

.pipeline g.disabled ellipse.event-state{
	fill : var(--color-sub-active);
}
.pipeline g.disabled text.event-state-text{
	text-decoration: line-through;
	font-family: 'NanumGothic';
}

.pipeline g ellipse.event-changed-border{
	fill : var(--color-red);
	opacity: 0;           /* 요소는 완전히 투명 */
	visibility: hidden;   /* 요소는 보이지 않음 */
	transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
}
.pipeline g.mark-as-changed ellipse.event-changed-border{
	opacity: 0.7;           /* 요소가 완전히 보이게 됨 */
	visibility: visible;  /* 요소가 보이게 됨 */
	transition: none;	  /* 즉시 나타남 */
}

.pipeline g ellipse.event-state-border{
	fill : var(--color-main-secondary);
	opacity: 0;           /* 요소는 완전히 투명 */
	visibility: hidden;   /* 요소는 보이지 않음 */
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.pipeline g.hover ellipse.event-state-border{
	opacity: 1;           /* 요소가 완전히 보이게 됨 */
	visibility: visible;  /* 요소가 보이게 됨 */
}
.pipeline g ellipse.event-state-border-bg{
	fill : rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}