@mixin input {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	border-radius: 0.375rem;
	border-color: #d1d5db;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

	&:focus {
		border-color: #739bf2;
		--tw-ring-color: #a2bcf6;
		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
			var(--tw-ring-offset-width) var(--tw-ring-offset-color);
		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
			calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
			var(--tw-shadow, 0 0 #0000);
		--tw-ring-opacity: 0.5;
	}
}

@mixin button($size: medium) {
	@if $size == large {
		padding: 1rem 1.125rem;
		font-size: 1rem;
	} @else if $size == small {
		padding: 0.25rem 0.75rem;
		font-size: 0.9rem;
	} @else {
		padding: 0.375rem 1.25rem;
		font-size: 1rem;
	}

	transition-property: background-color, border-color, color, fill, stroke,
		opacity, box-shadow, transform;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	line-height: 1.5rem;
	font-weight: 500;
	border-radius: 0.375rem;
	border-width: 1px;
	border-style: solid;
	box-shadow: rgb(0 0 0 / 0.05) 0px 1px 2px 0px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-color: rgb(209 213 219 / 1);
	background-color: rgb(255 255 255 / 1);
	color: rgb(107 114 128 / 1);

	@media (prefers-color-scheme: dark) {
		border-color: rgb(31 41 55 / 1);
		background-color: rgb(16 24 32 / 1);
		color: rgb(209 213 219 / 1);
	}

	&:hover {
		border-color: rgb(156 163 175 / 1);
		background-color: rgb(242 242 242 / 1);
		color: rgb(75 85 99 / 1);

		@media (prefers-color-scheme: dark) {
			border-color: rgb(156 163 175 / 1);
			background-color: rgb(26 32 44 / 1);
			color: rgb(156 163 175 / 1);
		}
	}

	&:focus {
		outline: none;
		box-shadow: rgb(209 213 219 / 1) 0px 0px 0px 3px;
		border-color: rgb(209 213 219 / 1);

		@media (prefers-color-scheme: dark) {
			box-shadow: rgb(31 41 55 / 1) 0px 0px 0px 3px;
			border-color: rgb(31 41 55 / 1);
		}
	}

	&:active {
		background-color: rgb(229 231 235 / 1);
		border-color: rgb(209 213 219 / 1);
		box-shadow: rgb(0 0 0 / 0.05) 0px 1px 2px 0px;

		@media (prefers-color-scheme: dark) {
			background-color: rgb(26 32 44 / 1);
			border-color: rgb(31 41 55 / 1);
			box-shadow: rgb(0 0 0 / 0.05) 0px 1px 2px 0px;
		}
	}

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

	i {
		@if $size == large {
			font-size: 1.25rem;
		} @else if $size == small {
			font-size: 0.75rem;
		} @else {
			font-size: 1rem;
		}
	}
}