:root {
  --toggle-button-radius: 2rem;
  --select-button-radius: 0.5rem;

  --icon-size: 30px;
  --select-button-top-and-bottom-padding: 0.5rem;
  --toggle-button-top-and-bottom-padding: 0.25rem;
  --button-left-and-right-padding: 8px;
  --space-between-circle-and-text: 8px;
  --slider-width: 5rem;
  --slider-height: 2.25rem;
}

.skinToggle-select-container fieldset {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.skinToggle-select-container fieldset > label {
  margin: 0;
}

.skinToggle-select-container fieldset > label span {
  display: none;
}

.skinToggle-select-container {
  position: relative;
  border-radius: var(--select-button-radius);
  background: #dddddd;
  padding: var(--select-button-top-and-bottom-padding) var(--button-left-and-right-padding);
  border: 1px solid #dddddd;
  display: flex;
  flex-direction: row;
  align-items: center;
}
label[for=skinToggle-select] {
  margin-bottom: 0;
  margin-right: 1rem;
}

#skinToggle-container:has(.skin-change-toggle-button) {
  width: var(--slider-width);
  height: var(--slider-height);
}

.skin-change-toggle-button {
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: var(--toggle-button-radius);
  padding: 0;
  border: 1px solid #dddddd;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.skin-change-toggle-circle-on {
  transform: translateX(calc((var(--slider-width) / 2 ) - var(--button-left-and-right-padding) / 2));
}

.skin-change-toggle-circle-on:has(.skin-change-toggle-circle) {
  transform: translateX(calc(100% + (2 * var(--button-left-and-right-padding))));
}

.skin-change-toggle-circle-wrapper {
  width: auto;
  height: 100%;
  transition: all 0.25s ease-in-out;
  display: flex;
  align-items: center;
  padding: var(--toggle-button-top-and-bottom-padding) var(--button-left-and-right-padding);
}

.skin-change-toggle-circle-wrapper > svg {
  width: fit-content;
  height: 100%;
}

.skin-change-toggle-circle {
  left: 0;
  top: 0;
  width: calc(var(--toggle-button-radius) / 2);
  height: calc(var(--toggle-button-radius) / 2);
  border-radius: var(--toggle-button-radius);
  background: white;
  border: 1px solid white;
}

.skin-change-toggle-option-container {
  padding: 0 calc((var(--toggle-button-radius) / 2) + var(--space-between-circle-and-text));
  display: flex;
  flex-direction: row;
}

.skin-change-toggle-option {
  display: none;
  min-height: 20px;
}

.skin-change-toggle-option-selected {
  display: block;
}