@import '../styles.css';

form {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
fieldset {
	border-color: var(--border-color);
	display: flex;
	flex-direction: column;
	div {
		display: none;
		border-top: 1px solid var(--border-color);
		margin-top: .25rem;
		padding-top: .25rem;
	}

}

label:has(input[value="lamps"]:checked) ~ #lamps-form {
	display: block;
}

label:has(input[value="dimensions"]:checked) ~ #dimension-form {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem .5rem;
}

#power-pole-quality {
	display: none;
	grid-template-columns: auto 1fr;
	gap: .5rem;
}
label:has(#power-poles:checked) ~ #power-pole-quality {
	display: grid;
}

textarea {
	resize: vertical;
	margin-top: .25rem;
}

#copy {
	background: none;
	border: none;
	color: var(--fg-color);
	border-radius: .1rem;
	cursor: pointer;
	transition: background-color 250ms ease;
	line-height: 1;
	padding: .1rem;
	&:hover,&:active {
		background-color: color-mix(in srgb, var(--bg-color), var(--fg-color) 20%);
	}
}


:popover-open {
  position: fixed;
  inset: unset;
  bottom: 1rem;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--bg-color);
  color: var(--fg-color);
  border: 2px solid var(--border-color);
  border-radius: .5rem;
  padding: .5rem 1rem;
}

#copy-failed {
  background: red;
}

canvas {
	width: 100%;
	height: auto;
	border: 1px solid var(--border-color);
	margin: 1rem auto;
	image-rendering: pixelated;
}