/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */

h2 {
  margin: 24px 0;
}

/* Definitions */

dl dt {
  padding: 4px;
  padding-right: 8px;
  margin-bottom: 4px;
}

@media (width >= 768px) {
  dl {
    display: flex;
    flex-wrap: wrap;
  }

  dl dt {
    text-align: right;
    width: 25%;
  }

  dl dd {
    padding: 4px;
    padding-left: 8px;
    width: 75%;
  }
}

/* Position */

.Position {
  border: 1px solid lightgrey;
  border-radius: 4px;
  display: inline-flex;
  font-family: monospace;
  font-size: 0.85rem;
}

.Position__label {
  background: rgb(0 0 0 / 5%);
  padding: 2px 8px;
}

.Position__coordinate {
  padding: 2px 4px 0 0;
  display: inline-block;
  text-align: right;
  width: 75px;
}

.Position__coordinate:first-child {
  border-right: 1px solid lightgrey;
}

/* StarMap */

.StarMap {
  background: black;
  color: white;
  margin: auto;
  max-width: 768px;
  position: relative;
}

.StarMap__scale {
  border-bottom: 5px solid white;
  bottom: 10px;
  position: absolute;
  right: 10px;
  text-align: center;
  width: 100px;
}

.StarMap__scale-controls {
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  position: absolute;
  right: 44px;
  width: 32px;
}

.StarMap__coordinates {
  bottom: 10px;
  left: 10px;
  position: absolute;
}

.StarMap__path-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgb(0 0 0 / 70%);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
}

.StarMap__path-toggle .form-check-label {
  color: white;
  cursor: pointer;
  user-select: none;
}

/* Trajectory animation */
@keyframes march {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -1.5%;
  }
}

.trajectory {
  animation: march 2s linear infinite;
}