/* Mode Switch
 * -------------------------------------------------------------------------- */

.mode-switch {
  --mode-switch-size: 4em;

  display: inline-flex;
  margin: 0;
  padding: var(--eighth-space);
  border-radius: 4em;
  position: relative;
  font-family: sans-serif;
  font-size: var(--font-size-x-small);
  background-color: var(--color-tertiary);

  &:focus-within {
    outline: none;
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 6px rgba(var(--color-focus-ring), 0.5);

    [data-color-scheme="dark"] & {
      box-shadow: 0 0 6px var(--color-focus-ring);
    }
  }

  label,
  .mode-switch__circle {
    width: var(--mode-switch-size);
    height: calc(var(--mode-switch-size) / 2);
    border-radius: 4em;
    overflow: hidden;
    border: 1px solid transparent;

    @media (max-width: 39.95em) {
      width: calc(var(--mode-switch-size) / 2);
    }
  }

  .mode-switch__circle {
    margin: var(--eighth-space);
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-txt--reversed);
    transition: transform 0.2s ease-in-out;
  }

  input {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;

    &:nth-of-type(1):checked {
      + label:before {
        filter: invert(0);
      }
      ~ .mode-switch__circle {
        transform: translateX(calc(1 * var(--mode-switch-size) - var(--mode-switch-size)));

        @media (max-width: 39.95em) {
          transform: translateX(calc((1 * var(--mode-switch-size) / 2) - (var(--mode-switch-size) / 2)));
        }
      }
    }

    &:nth-of-type(2):checked {
      + label:before {
        filter: invert(0);
      }
      ~ .mode-switch__circle {
        transform: translateX(calc(2 * var(--mode-switch-size) - var(--mode-switch-size)));

        @media (max-width: 39.95em) {
          transform: translateX(calc((2 * var(--mode-switch-size)) / 2 - (var(--mode-switch-size) / 2)));
        }
      }
    }

    &:nth-of-type(3):checked {
      + label:before {
        filter: invert(0);
      }
      ~ .mode-switch__circle {
        transform: translateX(calc(3 * var(--mode-switch-size) - var(--mode-switch-size)));

        @media (max-width: 39.95em) {
          transform: translateX(calc((3 * var(--mode-switch-size)) / 2 - var(--mode-switch-size) / 2));
        }
      }
    }
  }

  label {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }
}

.mode-switch__option {
  span {
    position: absolute;
    top: 100%;
    left: 100%;
    white-space: nowrap;
  }

  &::before {
    filter: invert(1);
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1em;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: filter 0.2s ease-in-out;
    text-align: center;
    line-height: calc(var(--mode-switch-size) / 2);
  }
}

.mode-switch__option--day:before {
  content: "Day";

  @media (max-width: 39.95em) {
    content: "D"
  }
}
.mode-switch__option--week:before {
  content: "Week";

  @media (max-width: 39.95em) {
    content: "W"
  }
}

/* Use this modifier class when there are only 2 options:
   makes the click/tap target the whole switch. */

.mode-switch--bool {
  input[type="radio"]:not(:checked) + label {
    width: calc(var(--mode-switch-size) * 2);
  }

  input[type="radio"]:checked + label {
    position: absolute;
    z-index: 1;
  }

  input:nth-of-type(2):checked + label {
    right: 0;
    margin-right: var(--eighth-space);
  }

  input:nth-of-type(1):not(:checked) + .mode-switch__option::before {
    right: 50%;
  }

  input:nth-of-type(2):not(:checked) + .mode-switch__option::before {
    left: 50%;
  }
}