/* Cursor */
.lg-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  z-index: 100;

  &--hover {
    .lg-cursor-pointer:before {
      transform: scale(2);
    }

    &--color {
      .lg-cursor-pointer:nth-child(2):before {
        background-color: cyan;
      }
    }
  }
}

.lg-cursor-pointer {
  position: absolute;
  top: 0;
  left: 0;

  will-change: transform;
  z-index: 2;

  &:before {
    display: block;
    margin: -4px 0 0 -4px;
    width: 8px;
    height: 8px;

    background-color: white;
    border-radius: 50%;
    content: '';
    opacity: 1;
    transition: transform 0.2s ease(in-out-cubic), opacity 0.2s linear, background 0.2s linear;
  }
}

.lg-cursor-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 1;

  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  path {
    fill: none;
    stroke: rgba(cyan, 0.25);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px;
  }
}

html.lg-cursor-hide {
  &,
  * {
    cursor: none !important;
  }
}