/* base */
@layer base {
	* {
		box-sizing: border-box;
		font-family: outfit, sans-serif;
	}

	button {
		margin: 0;
		font-family: inherit;
		font-size: 100%;
		color: inherit;
		cursor: pointer;
		background-color: transparent;
		background-image: none;
		border: none;
	}

	#open,
	form button {
		padding: 14px 24px;
		line-height: 1;
		border: solid 2px gray;
		border-radius: 8px;
		-webkit-tap-highlight-color: transparent;
	}

	#open {
		background-color: lightgreen;
		border-color: transparent;
	}

	dialog {
		width: min(80vw, 400px);
		padding: 20px 32px;

		form {
			display: grid;
			gap: 8px;

			p {
				margin-block: 0 8px;
			}

			button[value="accept"] {
				width: 100%;
				font-weight: bold;
				color: white;
				background-color: #9000ff;
				border-color: transparent;
			}

			button[value="cancel"] {
				color: #777;
				background-color: white;
				border-color: #777;
			}
		}
	}
}
