.coord-labels {
  .numeric {
    font-weight: 600;
  }
  .coord:not(.visible) {
    display: none;
  }
}

.highlight text {
  .x-coord,
  .y-coord,
  .r-coord,
  .z-coord,
  .b-coord {
    font-weight: 600;
  }
}

svg {
  polygon {
    stroke: hsl(0, 0%, 70%);
    stroke-width: 1;
  }

  .stroke {
    fill: none;
    stroke-width: 5px;
    stroke: black;

    &.rounded {
      stroke-linecap: round;
    }

    &.thin {
      stroke-width: 0.2px;
      stroke: hsl(0, 0%, 70%);

      &.red {
        stroke: red;
        stroke-width: 1px;
      }

      &.blue {
        stroke: blue;
        stroke-width: 1px;
      }
    }

    &.thick {
      stroke-width: 20px;
    }

    &.red {
      stroke: red;
    }

    &.blue {
      stroke: blue;
    }

    &.medium {
      stroke-width: 2px;
    }

    &.notch {
      stroke-width: 2px;
    }
  }

  text {
    font-size: 0.95rem;
    pointer-events: none;
    fill: black;
    font-family: var(--sans-serif);

    .x-coord {
      fill: hsl(0, 80%, 40%);
    }

    .y-coord {
      fill: hsl(240, 80%, 40%);
    }

    .r-coord {
      fill: hsl(280, 80%, 40%);
    }

    .z-coord {
      fill: hsl(120, 80%, 30%);
    }

    .b-coord {
      fill: hsl(40, 80%, 30%);
    }

    &.annotation {
      font-size: 0.8em;
    }

    &.small {
      font-size: 4px;
    }

    &.medium {
      font-size: 8px;
    }

    &.large {
      font-size: 12px;
    }

    &.center {
      text-anchor: middle;
    }
  }

  .sameX text .x-coord,
  .sameY text .y-coord,
  .sameZ text .z-coord,
  .sameB text .b-coord {
    font-weight: 600;
  }

  .sameX polygon {
    fill: hsl(0, 50%, 70%);
  }

  .sameY polygon {
    fill: hsl(240, 50%, 70%);
  }

  .sameZ polygon {
    fill: hsl(120, 50%, 70%);
  }

  .sameB polygon {
    fill: hsl(280, 50%, 70%);
  }

  .grid.triangles .uptriangle,
  .grid.square .square.odd {
    fill: hsl(147, 0%, 80%);
  }

  .grid.triangles .downtriangle,
  .grid.square .square.even {
    fill: hsl(147, 0%, 85%);
  }

  .grid.triangles .tile polygon {
    fill: white;
  }

  .rotation-180-animation {
    animation: animate-rotate-180 3s cubic-bezier(0.86, 0, 0.07, 1) infinite;
    transform-origin: 0px 43.3px;
  }

  .rotation-120-animation {
    animation: animate-rotate-120 3s cubic-bezier(0.86, 0, 0.07, 1) infinite;
    transform-origin: 0px 28.87px;
  }

  .grid .square .tile {
    transform-origin: 50px 50px;
  }

  /* .flippable means that the contents can be rotated 180 degrees. It has a separate g element to not be overriden by the translation of the .triangle element */
  .downtriangle .flippable {
    transform: rotate(180deg);
    transform-origin: 0px 43.3px;
  }

  .grid .square .tile,
  .grid .triangle .tile {
    fill: none;

    &.rot90deg {
      transform: rotate(90deg);
    }

    &.rot120deg {
      transform: rotate(120deg);
      transform-origin: 0px 28.87px;
    }

    &.rot240deg {
      transform: rotate(240deg);
      transform-origin: 0px 28.87px;
    }
  }

  .highlight polygon {
    fill: hsl(40, 100%, 80%);
  }
}

.coordinate-buttons button {
  padding: 15px 30px;
  border: none;
  margin: 0 10px;
  text-align: center;
  font-size: 1.2em;
  background-color: hsl(0, 0, 70%);

  &.active {
    background-color: yellow;
  }
}

@keyframes animate-rotate-180 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-rotate-120 {
  0% {
    transform: rotate(0deg);
  }

  33% {
    transform: rotate(120deg);
  }

  67% {
    transform: rotate(240deg);
  }

  100% {
    transform: rotate(360deg);
  }
}