:host {
  --loader-color: #2b62ab;
}

.loading-sheet {
  position: absolute;
  inset: 0;                       // top:0; right:0; bottom:0; left:0;
  background: rgba(180, 180, 180, 0.302); // затемнение карты
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;                  // поверх карты
  pointer-events: all;            // блокирует клики по карте
}

.page-loader__loader {
  position: relative;
  width: 60px;
  height: 60px;
  color: var(--loader-color); // для svg

  .loader-circle {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--loader-color);
    transition-duration: 0.3s;
  }

  .loader-line-mask {
    position: absolute;
    inset: 0;
    width: 30px;
    height: 60px;
    margin: 0;
    overflow: hidden;
    transform-origin: 30px 30px;
    animation: rotate 1.2s infinite linear;

    .loader-line {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
    }
  }

  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}