/* Direct stylesheet authoring is an advanced feature. Knowledge of CSS required.*/

.psc-x1 { transition: all .2s ease-in-out; }
.psc-x1:hover { transform: scale(1.5) !important;  z-index: 5;}


.psc-x2 { transition: all .2s ease-in-out; }
.psc-x2:hover { transform: scale(2) !important;  z-index: 5;}

.psc-x3 { transition: all .2s ease-in-out; }
.psc-x3:hover { transform: scale(3) !important;  z-index: 5;}

/* Set the styling for the Table component checkbox colour.*/
.ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__checkedIcon {
    color: black;
}
.ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__uncheckedIcon {
    color: black;
}

div[data-component="ia.input.fileupload"] .ia_button--primary {
    background-color: var(--neutral-30);
    border-style: None;
    color: black;
    border-radius:20px;
}


/* Help page styles */

.psc-background:hover { 
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	transition: box-shadow 0.9s ease-in-out;
}

.psc-background-none { 
	box-shadow: 0 0px 0px 0 , 0 0px 0px 0;
	transition: box-shadow 0.9s ease-in-out;
}

@keyframes fadeIn{
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.psc-FadeInFast {
	animation: fadeIn 2s;
}

.psc-FadeInMedium {
	animation: fadeIn 4s;
}

.psc-FadeInSlow {
	animation: fadeIn 6s;
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.psc-rotate {
  animation: rotation 2s infinite linear;
}

/* shared transition for all angle-classes */
[data-component="ia.display.view"].psc-hover,
[data-component="ia.display.view"].psc-hover-60,
[data-component="ia.display.view"].psc-hover-90,
[data-component="ia.display.view"].psc-hover-150,
[data-component="ia.display.view"].psc-hover-180,
[data-component="ia.display.view"].psc-hover-270{
  transition: transform 100ms linear;
}

/* base rotations */
[data-component="ia.display.view"].psc-hover  { transform: rotate(0deg)  !important; }
[data-component="ia.display.view"].psc-hover-60  { transform: rotate(60deg)  !important; }
[data-component="ia.display.view"].psc-hover-90  { transform: rotate(90deg)  !important; }
[data-component="ia.display.view"].psc-hover-150 { transform: rotate(150deg) !important; }
[data-component="ia.display.view"].psc-hover-180 { transform: rotate(180deg) !important; }
[data-component="ia.display.view"].psc-hover-270 { transform: rotate(270deg) !important; }

/* hover (one line per variant still required) */
[data-component="ia.display.view"].psc-hover:hover  { transform: rotate( 0deg)  scale(2) !important; z-index:10; }
[data-component="ia.display.view"].psc-hover-60:hover  { transform: rotate(60deg)  scale(2) !important; z-index:10; }
[data-component="ia.display.view"].psc-hover-90:hover  { transform: rotate(90deg)  scale(2) !important; z-index:10; }
[data-component="ia.display.view"].psc-hover-150:hover { transform: rotate(150deg) scale(2) !important; z-index:10; }
[data-component="ia.display.view"].psc-hover-180:hover { transform: rotate(180deg) scale(2) !important; z-index:10; }
[data-component="ia.display.view"].psc-hover-270:hover { transform: rotate(270deg) scale(2) !important; z-index:10; }

/*remove z indexes for the conveyors and chutes */
[data-component="ia.display.view"].psc-conveyor:hover {transform: scale(1.5) rotate(0deg) !important; z-index:0 !important;}
[data-component="ia.display.view"].psc-conveyor-150:hover {transform: scale(1.5) rotate(150deg) !important; z-index:0 !important;}
[data-component="ia.display.view"].psc-conveyor-90:hover {transform: scale(1.5) rotate(90deg) !important; z-index:0 !important;}

@keyframes pulse {
  0%   { opacity: 0.3; filter: blur(2px); }
  50%  { opacity: 1; filter: blur(5px); }
  100% { opacity: 0.3; filter: blur(2px); }
}


@keyframes conveyor {
  0%   { opacity: 0.3; filter: blur(0.5px); }
  50%  { opacity: 1; filter: blur(1.4px); }
  100% { opacity: 0.3; filter: blur(0.5px); }
}