.custom-cursor {

	.circle-cursor {
		position: fixed;
		left: 0;
		top: 0;
		pointer-events: none;
		transform: translateZ(0);
		visibility: hidden;

		@include border-radius(50%);

		&-inner {
			margin-left: -3px;
			margin-top: -3px;
			width: 6px;
			height: 6px;
			z-index: 10000001;
			background-color: $color-red;

			&.cursor-link-hover {
				margin-left: -10px;
				margin-top: -10px;
				width: 20px;
				height: 20px;
				background-color: $color-red;
				opacity: .5;
			}
		}

		&-outer {
			margin-left: -15px;
			margin-top: -15px;
			width: 30px;
			height: 30px;
			border: 1px solid $color-red;
			z-index: 10000000;
			opacity: .5;
			transition: all .1s ease-out;
		}

		@include tablet-screen {

			display: none;
		}
	}

	.cursor-link {

		&.circle-cursor-inner {
			background: transparent !important;

			&.cursor-link-hover {
				opacity: 1;
			}

			svg {
				fill: $color-white;
			}
		}

		&.circle-cursor-outer {

			&.cursor-link-hover {
				margin-left: -2rem;
				margin-top: -2rem;
				width: 4rem;
				height: 4rem;
				background-color: rgba($color-neutral, .75);
				border: none;
			}
		}
	}

	a {

		&[data-cursor-class] {
			cursor: none;
		}
	}
}