kleinfreund
diff --git a/‎dist/ColorPicker.css
Lines changed: 1 addition & 1 deletion b/‎dist/ColorPicker.css
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/ColorPicker.vue
Lines changed: 2 additions & 2 deletions b/‎src/ColorPicker.vue
Lines changed: 2 additions & 2 deletions
@@ -560,7 +560,7 @@ $width-color-space: 300px;
 	grid-column: 1 / -1;
 
 	overflow: hidden;
-	height: calc(var(--vacp-width-color-space, $width-color-space) * 0.6);
+	aspect-ratio: 1 / 0.6;
 }
 
 .vacp-color-space-thumb {
@@ -582,7 +582,7 @@ $width-color-space: 300px;
 */
 .vacp-color-space-thumb:focus {
 	outline-color: transparent; /* 1. */
-	box-shadow: 0 0 0 var(--vacp-width-border, $width-border) var(--vacp-color-border, $color-border), 0 0 0 3px var(--vacp-color-focus, $color-focus);
+	box-shadow: 0 0 0 var(--vacp-width-border, $width-border) var(--vacp-color-border, $color-border), 0 0 0 calc(var(--vacp-width-border, $width-border) + 2px) var(--vacp-color-focus, $color-focus);
 }
 
 .vacp-range-input-label {
Original file line number	Diff line number	Diff line change
`@@ -560,7 +560,7 @@ $width-color-space: 300px;`
`560`	`560`	`grid-column: 1 / -1;`
`561`	`561`
`562`	`562`	`overflow: hidden;`
`563`		`- height: calc(var(--vacp-width-color-space, $width-color-space) * 0.6);`
	`563`	`+ aspect-ratio: 1 / 0.6;`
`564`	`564`	`}`
`565`	`565`
`566`	`566`	`.vacp-color-space-thumb {`
`@@ -582,7 +582,7 @@ $width-color-space: 300px;`
`582`	`582`	`*/`
`583`	`583`	`.vacp-color-space-thumb:focus {`
`584`	`584`	`outline-color: transparent; /* 1. */`
`585`		`- box-shadow: 0 0 0 var(--vacp-width-border, $width-border) var(--vacp-color-border, $color-border), 0 0 0 3px var(--vacp-color-focus, $color-focus);`
	`585`	`+ box-shadow: 0 0 0 var(--vacp-width-border, $width-border) var(--vacp-color-border, $color-border), 0 0 0 calc(var(--vacp-width-border, $width-border) + 2px) var(--vacp-color-focus, $color-focus);`
`586`	`586`	`}`
`587`	`587`
`588`	`588`	`.vacp-range-input-label {`