// stylelint-disable selector-no-qualifying-type

.cursor {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursor {
    --lx-cursor-dimension: 15px;
    --lx-cursor-outline-dimension: 100%;

    position: fixed;
    top: -99999px;
    left: -99999px;
    z-index: 9999999;
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: stretch;
    width: var(--lx-cursor-dimension);
    height: var(--lx-cursor-dimension);
    overflow: hidden;
    pointer-events: none;
    background-color: var(--#{$prefix}primary);
    backdrop-filter: invert(100%);
    border-radius: 100%;
    transition: width .3s, height .3s, opacity .3s;
    transform: translate(-50%, -50%);

    div,
    span {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      font-weight: 700;
      color: var(--#{$prefix}body-bg);
      text-transform: uppercase;
      transition: $transition-base;
    }
    div {
      width: 0;
      height: 100%;
    }
    span {
      width: 100;
      height: 0%;
    }
  }

  .cursor--click {
    --lx-cursor-outline-dimension: calc(var(--lx-cursor-dimension) + 20px);
  }

  .cursor--hover-a {
    --lx-cursor-dimension: 32px;
    mix-blend-mode: color;
  }

  .cursor--active:not(.cursor--hover-a) {
    --lx-cursor-dimension: 55px;

    div.active {
      width: 100%;
    }
    span.active {
      height: 100%;
    }
  }
}