/* ----------------------------------------------------------------------------
Author: RickApps
Website: https://github.com/rickapps/
-----------------------------------------------------------------------------*/

.dot {
  background-color: var(--dot-color1);
  height: 20%;
  width: 20%;
  border-radius: 50%;
  z-index: 5;
  background-image: radial-gradient(var(--dot-color1),var(--dot-color2));
  background-size: 150% 150%;
  animation: lightsource 10s ease-out 0s infinite;
}

.top-left {
  position: absolute;
  top: -10%;
  left: -10%;
}

.top-right {
  position: absolute;
  top: -10%;
  right: -10%;
}

.bottom-left {
  position: absolute;
  bottom: -10%;
  left: -10%;
}

.bottom-right {
  position: absolute;
  bottom: -10%;
  right: -10%;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--gridSize), auto);
  background-color: var(--box-background-color);
  padding: 20px;
}

.grid-item {
  position: relative;
  background-color: var(--box-background-color);
  border-top: 3px solid var(--box-border-color);
  border-left: 3px solid var(--box-border-color);
  aspect-ratio: 1;
}

.claim0 {
  background-color: var(--machine-background-color);
}

.claim1 {
  background-color: var(--play1-background-color);
}

.claim2 {
  background-color: var(--play2-background-color);
}

.claim3 {
  background-color: var(--play3-background-color);
}

.claim4 {
  background-color: var(--play4-background-color);
}

.right-edge {
  border-right: 3px solid var(--box-border-color);
}

.bottom-edge {
  border-bottom: 3px solid var(--box-border-color);
}

.deactivate {
  pointer-events: none;
}

.grid-item a {
  margin: 0%;
  background-color: var(--line-available-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  z-index: 4;
}

.grid-item a:hover, a:active {
  background-color: var(--line-hover-color);
}

/* The line has been drawn. Turn off hover and any other effects */
/* The style is more specific than the .grid-item a tag so it overrides */
.grid-item a.selected {
  background-color: var(--line-selected-color);
  pointer-events: none; 
}

.line-top {
  position: absolute;
  top: -2%;
  width: 100%;
  height: 5%;
}
.line-bottom {
  position: absolute;
  bottom: -2%;
  width: 100%;
  height: 5%;
}
.line-left {
  position: absolute;
  left: -2%;
  height: 100%;
  width: 5%;
}
.line-right {
  position: absolute;
  right: -2%;
  height: 100%;
  width: 5%;
}

/* Animations */

.signal {
  animation-name: dance;
  animation-duration: 500ms;
  animation-iteration-count: 6;
}

.reverse {
  animation-direction: reverse;
}

.extrude {
  animation-duration: 3s;
  animation-timing-function: ease-in;
}

.horizontal {
  animation-name: h-grow;
}

.vertical {
  animation-name: v-grow;
}

.qsignal {
  animation-name: dance;
  animation-duration: 500ms;
  animation-iteration-count: 3;
}

.qextrude {
  animation-duration: 1.5s;
  animation-timing-function: ease-in;
}

@keyframes v-grow {
  from {height: 0; background-color: var(--line-alert1-color);}
  to {height: 100%; background-color: var(--line-alert2-color);}
}

@keyframes h-grow {
  from {width: 0; background-color: var(--line-alert1-color);}
  to {width: 100%; background-color: var(--line-alert2-color);}
}

@keyframes dance {
  0%,100% { background-color: var(--dot-alert1-color); box-shadow: 10px 10px 5px var(--dot-alert1-color);}
  25% {box-shadow: 10px -10px 5px var(--dot-alert1-color);}
  50% { background-color: var(--dot-alert2-color); box-shadow: -10px -10px 5px var(--dot-alert1-color);}
  75% {box-shadow: -10px 10px 5px var(--dot-alert1-color);}
}

@keyframes lightsource {
  0%,100% { background-position: 10% 70%;}
  50% { background-position: 90% 30%;}
}