.button
	margin: auto 0
	padding: 0.5rem 0.7rem

	display: flex
	align-items: center

	text-decoration: none
	white-space: nowrap
	font-size: 0.9em

	background-color: RGBA($white, 0.02)
	color: RGB($white)

	border-radius: 2px
	border: 0 solid transparent

	transition: background-color 0.1s ease-in-out

	&:hover
		background-color: RGBA($white, 0.3)

	&.primary
		background-color: RGBA($primary, 0.02)
		color: RGB($primary)

		&:hover
			background-color: RGBA($primary, 0.3)

	&.secondary
		background-color: RGBA($secondary, 0.02)
		color: RGB($secondary)

		&:hover
			background-color: RGBA($secondary, 0.3)

	> i
		font-size: 1.25em
		display: block

.text-input
	margin: auto 0
	width: 100%

	position: relative
	display: flex
	flex-direction: row

	> label
		padding: 0.5rem 0.7rem
		min-width: 7rem

		text-decoration: none
		text-align: end
		white-space: nowrap
		font-size: 0.9em

		background-color: RGBA($white, 0.02)
		color: RGB($white)
		border-radius: 2px 0 0 2px

	> input
		padding: 0.5rem 0.7rem
		width: 100%

		font-size: 0.9em

		background-color: RGBA($white, 0.02)
		color: RGB($white)

		border: 0 solid transparent
		border-left: 1px solid RGBA($white, 0.1)
		border-radius: 0 2px 2px 0

		&:hover
			background-color: RGBA($white, 0.1)
			border-left: 1px solid transparent

		&:focus-visible, &:focus
			background-color: RGBA($white, 0.1)

			outline: 0 solid transparent
			border-left: 1px solid transparent
			border-radius: 0 2px 0 0