.switch-mode,
.switch-mode * {
  box-sizing: border-box;
}
.switch-mode{
  width: 2.75rem;
  height: 2.75rem;
  position: relative;
}
.switch-mode__elipse  {
  background: var(--light-mode-switch-on-background);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}

.switch-mode__icon {
  width: var(--icon_size_button) -12px; /* Set to fixed size */
  height: var(--icon_size_button) -12px; /* Set to fixed size */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjusts positioning to be centered */
}

/* variant styles */
.switch-mode.mode-dark .switch-mode__elipse {
  background: var(--dark-mode-button-gradient);
  border-style: solid;
  border-color: var(--dark-mode-switch-off-stroke);
  border-width: 0.125rem;
}

.switch-mode.mode-dark .switch-mode__icon {
    filter: brightness(0); /* This makes the image black */
}

.switch-mode.mode-light .switch-mode__icon {
    filter: brightness(100); /* This makes the image white */
}

.switch-mode.mode-light .switch-mode__elipse {
    background: var(--light-mode-switch-on-background); /* Black background */
    border-color: var(--light-mode-switch-on-background); /* Black border */
}