@property --node-hook-inner-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 5px;
}

.wp-block-button {.foo{}
	.wp-element-button {
		align-items: center;
		.foo{}
		svg,img {
			fill: currentColor;
			vertical-align:middle;
			margin-right: 1em;
			margin-left: -0.5em;
			vertical-align: middle;
		}
	}
	&.is-style-outline{.foo{}
		.wp-element-button {
			position: relative;
			text-align: left;
			padding: 0.75rem 3rem 0.6rem 3rem;
			min-height: 5.1rem;
			.foo{}
			&:has(svg,img) {
				padding-left: 6rem;
				.foo{}
				svg,img {
					position: absolute;
					left: 1.2em;
					top: 50%;
					transform: translateY(-50%);
					margin: 0;
				}
			}
			.foo{}
			body.home .gaia-hero-links &,
			.gaia-hero.hero-full  .gaia-hero-links & {
				text-transform: uppercase;
				max-width: 30rem;
				min-height: 5.9rem;
			}
		}
	}
	&.is-style-node {
		.foo{}
		.wp-element-button {
			position: relative;
			padding: 0.5em 1.4em;
			line-height: 1.2;
			border: 2px solid transparent;
			font-size: inherit;
			font-weight: inherit;
			margin-bottom: calc(4rem + 22px);
			transition: all .35s;
			.foo{}
			.node-circle {
				position: absolute;
				border-color: inherit;
				background-color: inherit;
				margin-top: 0rem;
				margin-bottom: 2rem;
				top: 100%;
				left: calc(50% + 1px);
				transition: margin-top .35s;
			}
			.node-circle::before {
				content: '';
				display: block;
				border: 0;
				background-color: inherit;
				width: 2px;
				height: 4rem;
				transition: height .35s;
			}
			.node-circle::after {
				--node-hook-inner-size: 5px;
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%) translateY(50%);
				border-radius: 50%;
				transition: --node-hook-inner-size 0.35s;
				z-index: 0;
				width: 40px;
				height: 40px;
				background-color: inherit;
				mask-image: radial-gradient(circle, black 0px, black var(--node-hook-inner-size), transparent calc(var(--node-hook-inner-size) + 1px), transparent 17px, black 18px);
				mask-repeat: no-repeat;
			}
			&.has-border-color {
				border: 2px solid;
				.foo{}
				.node-circle::before {
					width: 0;
					border-left: 1px solid;
					border-right: 1px solid;
					border-color: inherit;
				}
				.node-circle::after {
					width: 0;
					height: 0;
					border: 20px solid;
					border-color: inherit;
				}
				
			}
			&:hover .node-circle {
				margin-top: 4rem;
			}
			&:hover .node-circle::before {
				height: 0rem;
			}
			&:hover .node-circle::after  {
				--node-hook-inner-size: 14px;
			}
		}
		@media screen and (max-width: 768px) {
			.wp-element-button {
				max-width: unset;
				margin-bottom: 0;
				.foo{}
				.node-circle {display:none;}
				
			}
		}
	}
}