From ec3b3d8a29fc660ade764522cd08dcd5f7954d2d Mon Sep 17 00:00:00 2001
From: Dunsin <78784850+Dun-sin@users.noreply.github.com>
Date: Wed, 2 Nov 2022 12:23:17 +0100
Subject: [PATCH] fix: range in border radius (#351)

* fix(style.css): change background for border radius generator
---
 src/style.css | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/style.css b/src/style.css
index 827d4e50..341b8566 100644
--- a/src/style.css
+++ b/src/style.css
@@ -689,7 +689,6 @@ input[type='number']::-webkit-outer-spin-button {
 
 .border-range-inputs input {
   width: 100%;
-  cursor: pointer;
 }
 
 #border-radius-code {
@@ -771,22 +770,41 @@ input[type='range'] {
   cursor: pointer;
 }
 
-input[type='range']::-webkit-slider-runnable-track,
+input[type='range']::-webkit-slider-runnable-track {
+  background: var(--secondary-color);
+  height: 0.5rem;
+  border-radius: 10px;
+}
+
 input[type='range']::-moz-range-track {
   background: var(--secondary-color);
   height: 0.5rem;
   border-radius: 10px;
 }
 
-input[type='range']::-webkit-slider-thumb,
-input[type='range']::-moz-range-thumb {
+.border-range-inputs input[type='range']::-webkit-slider-runnable-track {
+  background-color: var(--primary-color);
+}
+
+.border-range-inputs input[type='range']::-moz-range-track {
+  background-color: var(--primary-color);
+}
+
+input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   margin-top: -12px;
   background-color: var(--tertiary-color);
   height: 1rem;
   width: 1rem;
+  border-radius: 10px;
+}
+
+input[type='range']::-moz-range-thumb {
   border: none;
+  background-color: var(--tertiary-color);
+  height: 1rem;
+  width: 1rem;
   border-radius: 10px;
 }