@use "sass:color";
@use "../variables" as *;

dialog {
	border: 3px solid $color-dark;
	border-radius: 2%;

	color: $color-dark;
	background: $color-white;
}

dialog > form[method="dialog"] {
	position: absolute;
	top: 0;
	right: 0;
	line-height: 0px;

	button {
		padding-top: 6px;
		padding-left: 3px;
		font-size: 150%;
		line-height: 0px;
		color: $color-dark;

		border: 0;
		background: transparent;
		&::before {
			text-align: center;
			vertical-align: middle;
			content: "\00d7"; // Nicer X
		}
		&:hover {
			color: black;
			transition: color 0.1s;
		}
	}
}

.close_button {
	color: red;
	position: absolute;
	top: 5%;
	right: 2%;
	background: rgba(0%,0%,0%,10%);

	&:hover {
		color: rgb(0%,100%,100%);
		background: rgba(0%,0%,0%,80%);
	}
}