@use "../vars.scss" as *;

@use "sass:color" as color;

.dotdungeon.dotdungeon > .window-content {
	button {
		border-radius: 4px;
		box-sizing: border-box;
		border-style: solid;
		border-color: transparent;
		border-width: 2px;
		border-radius: 4px;
		transition:
			background-color 400ms ease-in-out,
			color 400ms ease-in-out,
			border-color 400ms ease-in-out;
		padding: 4px 8px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 4px;

		&.confirm {
			background: $colour-confirm;
			color: $text-on-confirm;

			&:hover:not(:disabled),
			&:focus-visible {
				background: transparent;
				color: $colour-confirm;
				border-color: $colour-confirm;
			}

			&:disabled {
				background: color.adjust($colour-confirm, $lightness: -10%);
				color: color.adjust($text-on-confirm, $lightness: -15%);
			}
		}

		&.neutral {
			background: $colour-neutral;
			color: $text-on-neutral;

			&:hover:not(:disabled),
			&:focus-visible {
				background: transparent;
				color: $colour-neutral;
				border-color: $colour-neutral;
			}

			&:disabled {
				background: color.adjust($colour-neutral, $lightness: -10%);
				color: color.adjust($text-on-neutral, $lightness: -15%);
			}
		}

		&.danger {
			background: $colour-danger;
			color: $text-on-danger;

			&:hover:not(:disabled),
			&:focus-visible {
				background: transparent;
				color: $colour-danger;
				border-color: $colour-danger;
			}

			&:disabled {
				background: color.adjust($colour-danger, $lightness: -10%);
				color: color.adjust($text-on-danger, $lightness: -15%);
			}
		}

		&.reduced-padding {
			padding: 2px 4px;
		}


		&.equal-padding {
			padding: 4px 4px;
			&.reduced-padding {
				padding: 2px 2px;
			}
		}
	}
}