color-picker {
	.button {
		width: 38px;
		height: 24px;
		appearance: none;
		border: 1px solid #a7a7a7;
		background-color: white;
		padding: 3px;

		&:active {
			background-color: #ddd;
		}
	}

	.button-tile {
		display: block;
		background-color: #000000;
		width: 100%;
		height: 100%;
	}

	.grid {
		display: grid;
		margin: 2px;
		gap: 2px;
	}

	.grid-tile, .grid-tile:hover {
		appearance: none;
		height: auto;
		border: 0;
		border-radius: 0;
		margin: 0;
		padding: 0;
	}

	.grid-tile[selected="true"] {
		border: 1px outset #C0C0C0;
	}

	.grid-tile:hover:not([selected="true"]) {
		border: 1px dotted #A7A7A7;
	}
}

