.hotgraphicaudio {
  &__pin:not(.has-pin-image) {
    background-color: @item-color;
    color: @item-color-inverted;
    border-radius: 50%;

    .no-touch &:hover {
      background-color: @item-color-hover;
      color: @item-color-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }
  }

  &__pin:not(.has-pin-image).is-visited {
    background-color: @visited;
    color: @visited-inverted;
  }

  // Numbered pins
  // --------------------------------------------------
  &__pin-number {
    height: @body-size;
    width: @body-size;
    line-height: @body-size;
    text-align: center;
    font-weight: @font-weight-bold;
  }
}
