.toggle-yesno {
  --height: 1.1em;
  --switch-diff: 2px;
  --width: calc(var(--height) * 2);
  --switch: calc(var(--height) - var(--switch-diff));
  border-radius: 18px;
  display: inline-block;
  height: var(--height);
  position: relative;
  width: var(--width);
  background-color: $crimson;
  padding: 0;

  &.yes {
    background-color: $russian-green;
  }

  .switch-handle {
    background: $white;
    border-radius: 10px;
    height: var(--switch);
    left: var(--switch-diff);
    position: absolute;
    margin: 0;
    top: 1px;
    width: var(--switch);
    display: grid;
    justify-content: center;
    align-content: center;

    svg {
      @include font-size("small");
    }
  }

  &[aria-checked="true"] .switch-handle {
    left: calc(calc(var(--width) - var(--switch)) - var(--switch-diff));
  }
}

.toggle-yesno {
  --height: 1.1em;
  --switch-diff: 2px;
  --width: calc(var(--height) * 2);
  --switch: calc(var(--height) - var(--switch-diff));
  border-radius: 18px;
  display: inline-block;
  height: var(--height);
  position: relative;
  width: var(--width);
  background-color: $rosewood;
  padding: 0;

  &.yes {
    background-color: $russian-green;
  }

  .switch-handle {
    background: $white;
    border-radius: 10px;
    height: var(--switch);
    left: var(--switch-diff);
    position: absolute;
    margin: 0;
    top: 1px;
    width: var(--switch);
    display: grid;
    justify-content: center;
    align-content: center;

    svg {
      @include font-size("small");
    }
  }

  &[aria-checked="true"] .switch-handle {
    left: calc(calc(var(--width) - var(--switch)) - var(--switch-diff));
  }
}

Change yes/no toggle to rosewood
Change yes/no toggle to rosewood

The crimson was too bright for this element.
