button {
	all: unset;
	cursor: pointer;
}

a {
	all: unset;

	&:any-link {
		color: inherit;
		cursor: pointer;
	}

	&:hover,
	&:active {
		color: inherit;
	}
}

button[x],
a[x] {
	&[x=''],
	&[x='primary'],
	&[x='outline'],
	&[x='underline'],
	&[x='icon'] {
		position: relative;
		font-size: 1em;
		font-family: var(--font-sans);
		font-weight: 300;
		line-height: 0.9;
		transition-property: all;
		transition-duration: 300ms;
		transition-timing-function: var(--ease-out);
		-webkit-tap-highlight-color: transparent;
		box-sizing: border-box;

		&:hover {
			filter: brightness(1.05);
		}

		&:active {
			box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
			filter: brightness(0.95);
			transition: none;
		}

		&[x=''],
		&[x='primary'],
		&[x='outline'] {
			display: flex;
			min-height: max(2vw, 3.5em);
			min-width: max(11.67vw, 14em);
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 0.5rem;
			overflow: hidden;
			border-radius: var(--radius-sm);
			padding-inline: max(3.5vw, 2em);
			padding-block: max(1.67vw, 2em);
			-webkit-backdrop-filter: blur(16px);
			backdrop-filter: blur(16px);

			&:hover {
				box-shadow:
					0 8px 16px -1px hsl(var(--fg-1) / 0.1),
					0 2px 6px -2px hsl(var(--fg-1) / 0.1);
			}

			&[x=''] {
				border: 1px solid hsl(var(--fg-1) / 0.5);
				background: hsl(0 0% 0% / 0.2);
				color: hsl(var(--fg-1));
			}

			&[x='primary'] {
				background: hsl(var(--accent-1));
				border: solid 1px hsl(var(--accent-2) / 0.5);

				&:hover {
					box-shadow:
						0 8px 16px -1px hsl(var(--accent-1) / 0.5),
						0 2px 6px -2px hsl(var(--accent-1) / 0.5);
				}
			}

			&[x='outline'] {
				background: transparent;
				border: solid 1px currentColor;
			}
		}

		&[x='underline'] {
			padding-bottom: 0.5em;
			color: hsl(var(--accent-1));
			text-decoration: underline;
			text-underline-offset: 0.4em;

			&:hover {
				text-underline-offset: 0.5em;
			}

			&:disabled {
				cursor: not-allowed;
				opacity: 0.5;
			}
		}

		&[x='icon'] {
			aspect-ratio: 1 / 1;
			padding: 1em;
			border-radius: 9999px;
			border: 1px solid hsl(0 0% 100%);
			background: hsl(0 0% 0% / 0.1);
			color: hsl(var(--fg-1));
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);

			& figure {
				width: 1em;
				aspect-ratio: 1 / 1;

				& img {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
		}
	}

	&[x='link'] {
		text-decoration: underline;
		text-underline-offset: 0.4em;
		transition: all 500ms var(--ease-out);

		&:hover {
			text-underline-offset: 0.5em;
		}

		& * {
			text-decoration: underline;
		}
	}

	& object {
		pointer-events: none;
	}
}