@import "mixins";
@import "fonts";
@import "reset";

.map {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  &__wrap {
    height: 145%;
    width: 100%;
    border: 0;
    @include absolute;
    z-index: 1;
  }

  &__mask {
    height: 100%;
    width: 100%;
    background: url(../images/map-mask.svg) top center no-repeat;
    background-size: cover;
    pointer-events: none;
    transform: scale(1.01);
    z-index: 2;
  }
}

.popup-info-substrate {
  width: calc(100% + 53px);
  height: calc(100% + 18px);
  @include absolute;
  @include center-align;
  overflow: hidden;
}

.marker-content {
  display: none;
}

.marker-info {
  padding: 17px 0;

  &__bg-wrap {
    @extend .popup-info-substrate;
  }

  &__bg {
    @keyframes animatedBackground {
      0% {
        background-position-x: 0;
      }
      100% {
        background-position-x: 100%;
      }
    }

    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 300%;
    height: 300%;
    background: linear-gradient(to right, #F44336 6.25%, #E91E63 6.25%, #E91E63 12.5%, #9C27B0 12.5%, #9C27B0 18.75%, #673AB7 18.75%, #673AB7 25%, #3F51B5 25%, #3F51B5 31.25%, #2196F3 31.25%, #2196F3 37.5%, #03A9F4 37.5%, #03A9F4 43.75%, #00BCD4 43.75%, #00BCD4 50%, #009688 50%, #009688 56.25%, #4CAF50 56.25%, #4CAF50 62.5%, #8BC34A 62.5%, #8BC34A 68.75%, #CDDC39 68.75%, #CDDC39 75%, #FFEB3B 75%, #FFEB3B 81.25%, #FFC107 81.25%, #FFC107 87.5%, #FF9800 87.5%, #FF9800 93.75%, #FF5722 93.75%, #FF5722 100%);
    animation: animatedBackground 10s linear infinite;
    background-size: 50%;
  }

  &__dash-wrap {
    height: 100px;
    width: 150px;
    @include absolute;
    margin: auto;
    top: -109px;
    bottom: auto;
  }

  &__rb-dash {
    background: url("../images/rb-dash.png") top center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
  }

  &__text {
    font-family: 'OpenGostTypeATT', sans-serif;
    font-size: 18px;
    color: $white;
    display: block;
    text-align: center;
    line-height: 1.2;
    padding: 20px;
    background: #000;
    z-index: 5;
  }
}

.poi-info-window {
  padding: 20px;
  margin-top: 0 !important;

  &::before {
    content: '';
    @extend .popup-info-substrate;
    background: linear-gradient(-45deg, #F44336 6.25%, #E91E63 6.25%, #E91E63 12.5%, #9C27B0 12.5%, #9C27B0 18.75%, #673AB7 18.75%, #673AB7 25%, #3F51B5 25%, #3F51B5 31.25%, #2196F3 31.25%, #2196F3 37.5%, #03A9F4 37.5%, #03A9F4 43.75%, #00BCD4 43.75%, #00BCD4 50%, #009688 50%, #009688 56.25%, #4CAF50 56.25%, #4CAF50 62.5%, #8BC34A 62.5%, #8BC34A 68.75%, #CDDC39 68.75%, #CDDC39 75%, #FFEB3B 75%, #FFEB3B 81.25%, #FFC107 81.25%, #FFC107 87.5%, #FF9800 87.5%, #FF9800 93.75%, #FF5722 93.75%, #FF5722 100%);
    z-index: 1;
  }

  &::after {
    content: '';
    width: 100%;
    height: calc(100% - 28px);
    background: $black;
    @include absolute;
    @include center-align;
    z-index: 2;
  }

  div, a {
    background-color: transparent !important;
    color: #fff !important;
    z-index: 3;
  }
}

.gm-style-iw {
  background: #000;
  //box-shadow: -14px 0px 0px $black, -14px 9px 0px $black, -14px -8px 0px $black, 15px -8px 0px $black, 15px 9px 0px $black; //Закраска тенью
  overflow: visible !important;

  &::after {
    content: '';
    width: 0;
    height: 0;
    border: 22px solid transparent;
    border-top-color: $black;
    z-index: 4;
    @include absolute;
    top: auto;
    bottom: -53px;
    margin: auto;
  }

  div {
    overflow: visible !important;
  }

  & > div {
    left: 50%;
    transform: translateX(-50%);
  }

  & + div {
    height: 20px !important;
    width: 20px !important;
    margin-top: 20px;
    margin-right: 20px;
    opacity: 1 !important;
    border-radius: 50%;
    transition: transform .5s ease;

    &:hover {
      transform: rotate(360deg);
    }

    img {
      display: none;
    }

    &::before,
    &::after {
      content: '';
      width: 100%;
      height: 2px;
      @include absolute;
      margin: auto;
      border-radius: 5px;
      background: $white;
    }

    &::before {
      transform: rotate(-45deg);
    }

    &::after {
      transform: rotate(45deg);
    }
  }
}

.gm-style-mtc > div,
.gmnoprint > div,
.gm-svpc {
  background-color: #f63981 !important;
}