/* Switcher */

.color-scheme-switch {
  --switcher-width: 75px;
  --switcher-height: 36px;
  --switcher-toggle-bg-color: hsl(216, 10%, 10%);
  --switcher-bg-color: #fff;
  --switcher-border-color: hsl(0, 0%, 89%);

  position: relative;
  display: flex;
  height: var(--switcher-height);
  flex: 0 0 var(--switcher-width);
  flex-wrap: nowrap;
  user-select: none;
  border: 2px solid var(--switcher-border-color);
  border-radius: var(--switcher-height);
  background-color: var(--switcher-bg-color);
  box-sizing: content-box;

  input {
    height: var(--switcher-height);
    margin: 0;
    flex: 1 1 33%;
    opacity: 0;
    appearance: none;
  }

  label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: var(--switcher-height);
    height: var(--switcher-height);
    margin: 0;
    content: "";
    background: var(--switcher-toggle-bg-color);
    border-radius: var(--switcher-height);
    transition: transform .3s ease-in-out;
  }

  input:first-child:checked ~ label {
    transform: translateX(0);
  }

  input:nth-child(2):checked ~ label {
    transform: translateX(calc(calc(var(--switcher-width) / 2) - 50%));
  }

  input:nth-child(3):checked ~ label {
    transform: translateX(calc(var(--switcher-width) - 100%));
  }
}

/* RTL overrides */
html[dir=rtl] .color-scheme-switch {
  input:first-child:checked ~ label {
    transform: translateX(calc(var(--switcher-width) - 100%));
  }

  input:nth-child(3):checked ~ label {
    transform: translateX(0);
  }
}
