.buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-block-start: 4rem;

	&.centered {
		justify-content: space-around;
	}

	a {
		text-decoration: none;
	}

	button {
		appearance: none;
		cursor: pointer;
		border: none;

		&:disabled {
			cursor: not-allowed;

			&:hover {
				background-color: var(--fg-muted-1);
				color: var(--fg-muted-5);
			}

			&:active {
				transform: none;
			}
		}
	}

	a,
	button {
		transition: var(--transition);
		box-shadow: var(--edge-highlight);
		border-radius: var(--rounded-corner);
		background-color: var(--fg-muted-1);
		padding: 0.75rem 1rem;
		color: var(--fg-muted-5);
		font-weight: bold;
		font-size: var(--font-size-small);
		line-height: 1;

		&:hover {
			background-color: var(--fg-muted-2);
			color: var(--fg-color);
		}

		&:active {
			transform: var(--active);
		}

		&.colored {
			box-shadow: none;
			background-color: transparent;
			color: var(--accent-color);

			&:hover {
				box-shadow: var(--edge-highlight);
				background-color: var(--accent-color-alpha);
			}
		}

		&.big {
			border-radius: 999px;
			padding: 1rem 1.5rem;
		}
	}
}