@keyframes dna-inner-pulse
{
  0% { transform: scale(1.2); }
  80% { transform: scale(0.1); }
  100% { transform: scale(1.2); }
}

@keyframes dna-chevron-pulse
{
  0% { transform: scale(1); }
  85% { transform: scale(0.3); }
  95% { transform: scale(0.3); }
  100% { transform: scale(1); }
}

DnaRadarPanel
{
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
  box-shadow: none;

  .radar-wrapper
  {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .radar-circle
  {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0.5px solid;
    opacity: 0.1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .inner-circle
  {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0.5px solid;
    animation: dna-inner-pulse 1s linear infinite;
  }

  .dna-radar-circle
  {
    opacity: 0.55;
  }

  .dna-icon
  {
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url( /ui/icons/bodyinfo/dna-color.png );
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow( 0 0 4px rgba( 0, 0, 0, 0.85 ) );
    opacity: 1;
  }

  .distance
  {
    position: absolute;
    font-size: 11px;
    font-weight: bold;
    color: white;
    opacity: 0.7;
    text-shadow: 
      -1px -1px 0 black,
      1px -1px 0 black,
      -1px 1px 0 black,
      1px 1px 0 black,
      0 0 4px rgba(black, 0.8);
    text-align: center;
    white-space: nowrap;
    z-index: 10;
  }

  .chevron-wrapper
  {
    display: flex;
    justify-content: center;
    align-items: center;

    &.compact .chevron
    {
      font-size: 32px;
      animation: none;
    }
  }

  .chevron
  {
    font-size: 64px;
    font-weight: 900;
    background-color: transparent;
    border: none;
    box-shadow: none;
    animation: dna-chevron-pulse 0.5s ease-in-out infinite;
  }
}