@import '../common/variables';
@import '../common/mixins';
// Map Compass
//
// Markup:
// <div class="compass">
// <div class="outerRing"></div>
// <div class="innerRing" title="Click and drag to rotate the camera"></div>
// <div class="rotationMarker"></div>
// </div>
//
// Style guide: Component.map-compass

.vc-compass {
  position: relative;
  cursor: default;
  width: $compass-width;
  height: $compass-width;
  // composes: sm-show from '../../../styles/common/_base.scss';
  z-index: 100;
  svg {
    fill: $dark;
  }
}
.vc-compass-innerRing {
  @include vertical-align();
  height: $compass-width - $ring-width -20px;
  width: $compass-width - $ring-width -20px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  padding: 4px;
  box-sizing: border-box;
  background: #ffffff;
}
.vc-compass-rotation-marker {
  background-image: url('../../images/vc-compass-rotation-marker.svg');
  height: $compass-width - 4px;
  width: $compass-width - 4px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  background-repeat: no-repeat;
  background-size: contain;
}

.vc-compass-outerRing {
  height: $compass-width;
  width: $compass-width;
  border-radius: 50%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  left: 0;
  svg {
    width: 100%;
    height: 100%;
  }
}