@layer main {
	@layer buttons {
		/* #region ButtonBases */
		.btn {
			padding: 1.25em 3.125em;
			min-width: 120px;
			font-family: var(--font-family-display);
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.2;
			text-align: center;
			text-decoration: none;
			border: 2px solid rgb(var(--color-btn-bg));
			background-color: rgb(var(--color-btn-bg));
			color: rgb(var(--color-white));
			position: relative;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			gap: calc(var(--spacer) * .5);
			cursor: pointer;
			transition: background-color .3s, border-color .3s;
			-webkit-touch-callout: none;

			.icon-glyph{
				font-size: 1.5em;
			}

			&.btn-small{
				padding: .5em;
				min-width: 0;
				line-height: 1;
			}
		}

		.btn-icon{
			font-family: var(--font-family-icon);
			padding: .4em;
			aspect-ratio: 1 / 1;
			font-size: 1.5rem;
			font-weight: 400;
			line-height: 1;
			text-align: center;
			text-decoration: none;
			border: 2px solid rgb(var(--color-btn-bg));
			background-color: rgb(var(--color-btn-bg));
			color: rgb(var(--color-white));
			border-radius: 50%;
			position: relative;
			display: inline-flex;
			align-items: center;
			cursor: pointer;
			transition: background-color .3s, border-color .3s;
			-webkit-touch-callout: none;

			&.btn-small{
				padding: .75em;
				font-size: .85rem;
				border-width: 1.333px;
				line-height: 0;
			}
		}
		/* #endregion ButtonBases */

		/* #region ButtonColors */
		.btn.btn-primary,
		.btn-icon.btn-primary{
			--color-btn-bg: var(--color-blue);
			--color-btn-bg-hover: var(--color-blue);
			--color-btn-bg-active: var(--color-blue);
			--color-btn-outline-hover: var(--color-blue);
			--color-btn-outline-active: var(--color-blue);
		}

		.btn.btn-secondary,
		.btn-icon.btn-secondary{
			--color-btn-bg: var(--color-lt-blue);
			--color-btn-bg-hover: var(--color-lt-blue);
			--color-btn-bg-active: var(--color-lt-blue);
			--color-btn-outline-hover: var(--color-lt-blue);
			--color-btn-outline-active: var(--color-lt-blue);

			color: rgb(var(--color-black));
		}

		.btn.btn-destructive,
		.btn-icon.btn-destructive{
			--color-btn-bg: var(--color-red);
			--color-btn-bg-hover: var(--color-red);
			--color-btn-bg-active: var(--color-red);
			--color-btn-outline-hover: var(--color-red);
			--color-btn-outline-active: var(--color-red);
		}
		/* #endregion ButtonColors */

		/* #region ButtonStates */
		.btn:not(:disabled, .disabled):hover,
		.btn-icon:not(:disabled, .disabled):hover{
			--color-btn-bg: var(--color-btn-bg-hover);
		}

		.btn:not(:disabled, .disabled):active,
		.btn-icon:not(:disabled, .disabled):active{
			--color-btn-bg: var(--color-btn-bg-active);
		}
		/* #endregion ButtonStates */

		/* #region ButtonVariations */
		.btn.btn-outline,
		.btn-icon.btn-outline{
			color: rgb(var(--color-btn-bg));
			background-color: rgb(var(--color-white));

			&:not(:disabled, .disabled):hover{
				background-color: rgb(var(--color-btn-outline-hover));
			}

			&:not(:disabled, .disabled):active{
				background-color: rgb(var(--color-btn-outline-active));
			}
		}

		.btn.btn-reverse,
		.btn-icon.btn-reverse{
			color: rgb(var(--color-btn-bg));
			background-color: rgb(var(--color-white));
			border-color: rgb(var(--color-white));

			&:not(:disabled, .disabled):hover{
				background-color: rgb(var(--color-btn-outline-hover));
				border-color: rgb(var(--color-btn-outline-hover));
			}

			&:not(:disabled, .disabled):active{
				background-color: rgb(var(--color-btn-outline-active));
				border-color: rgb(var(--color-btn-outline-active));
			}
		}

		.btn:disabled,
		.btn-icon:disabled,
		.btn.disabled,
		.btn-icon.disabled{
			--color-btn-bg: var(--color-charcoal-20);
			--color-btn-bg-hover: var(--color-charcoal-20);
			--color-btn-bg-active: var(--color-charcoal-20);

			color: rgb(var(--color-charcoal-50));
			background-color: transparent;
			cursor: default;
			pointer-events: none;
		}
		/* #endregion ButtonVariations */
	}
}