Colour Swatches border on hover/selected variants

Question

I am trying to create an effect on my colour swatches where if you hover over a swatch or select a swatch a black solid border appears around the swatch with a small gap of white space between the swatch and new border.

image:

.

I tried scaling up the size of the swatch & then adding a black border surrounding a white border, and inseting the original swatch to create the illusion of a gap, however I did not implement this correctly (see following code), as all that occurs on selected variants is a quick transition followed by no border.

image where pink is selected:

.

.color-swatches {
  display: flex;
}

.color-swatch {
  display: inline-block;
  width: 30px; /* Adjust the width of each color swatch */
  height: 30px; /* Adjust the height of each color swatch */
  margin-right: 15px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.color-swatch::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 3px solid white;
  border-radius: 5px;
  box-sizing: border-box;
  z-index: -1;
}

.color-swatch:hover::before,
.color-swatch input[type="radio"]:checked + span::before {
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid white;
}

.color-swatch input[type="radio"] {
  display: none;
}

.color-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #4b4b4b;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.color-swatch input[type="radio"]:checked + span {
  border-color: #000;
  transform: scale(1.2); /* Scale up the swatch when selected */
}

.color-swatch input[type="radio"]:checked + span::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #000;
  border-radius: 3px;
  transform: scale(1.2); /* Scale up the gap illusion border when selected */
  transition: transform 0.3s ease;
}

.color-swatch input[type="radio"]:checked + span:hover::after {
  transform: scale(1.3); /* Further scale up the gap illusion border on hover when selected */
}

Following is the Liquid/HTML code I use for the variant swatches:

    <legend class="form__label" id="option-{{ option.name | handle }}">{{ option.name }}: <span id="selected-{{ option.name | handle }}">{{ option.selected_value }}</span></legend>
     <div class="color-swatches">
           {%- for value in option.values -%}
               {%- assign variant = product.variants | where: option.name, value | first -%}
               {%- assign swatchColor = '' -%}
               {%- case value -%}
                   {%- when 'Pink' -%}
                       {%- assign swatchColor = '#E3BAB3' -%}
                   {%- when 'Lilac' -%}
                       {%- assign swatchColor = '#CBB9E0' -%}
                   {%- when 'Navy' -%}
                       {%- assign swatchColor = '#415873' -%}
                   {%- when 'Red' -%}
                       {%- assign swatchColor = '#D63238' -%}
                   {%- when 'Tan' -%}
                       {%- assign swatchColor = '#E1BC9F' -%}
                   {%- else -%}
                       {%- assign swatchColor = '' -%}
               {%- endcase -%}
               <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="color-swatch" style="background-color: {{ swatchColor }};">
                   <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                       name="{{ option.name }}"
                       value="{{ value | escape }}"
                       form="{{ product_form_id }}"
                       {% if option.selected_value == value %}checked{% endif %}
                       onchange="updateSelectedValue('{{ option.name | handle }}', '{{ value | escape }}')"
                   >
                   <span></span>
               </label>
           {%- endfor -%}
       </div>