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

.switch {
  --checked-color: var(--color-positive);
  --unchecked-color: var(--color-border);

  -webkit-tap-highlight-color: transparent;
}

.switch--outlined {
  --unchecked-color: var(--color-action-group-action);
}

.switch__container {
  display: flex;
  height: 3rem;
  width: 5rem;
  align-items: center;
  border-radius: 3rem;
  background: var(--unchecked-color);
  position: relative;
  flex-shrink: 0;

  &:hover { cursor: pointer; }

  .switch--outlined & {
    border: 2px solid var(--color-bg--main-very-thin);
    height: calc(2rem + 4px);
    width: calc(3.33rem + 4px);
  }

  .switch--labelled & {
    margin-left: 4ch;

    &::before {
      content: "Off";
      text-transform: uppercase;
      position: absolute;
      left: -4ch;
      top: 0.3em;
      width: 3ch;
      height: 1em;
      text-align: right;
      font-size: var(--font-size-small);
    }

    @media (max-width: 39.95em) {
      margin-left: 0;

      &::before {
        content: "";
      }
    }
  }
}

.switch__container--small {
  height: 2rem;
  width: 3.33rem;
}

.switch__button {
  -moz-appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  max-width: 100%;
  resize: none;
  background: var(--color-bg--main);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100%;
  transform: translateX(0.4rem);
  transition: transform 0.2s ease;
  text-indent: -999em;
  border: 0;
  padding: 0;

  &:hover { cursor: pointer; }

  &:focus,
  &:focus-within {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
    outline: none;
  }
  &::-moz-focus-inner { border: 0; }

  /* Don't show outlines for mouse interactions */
  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:disabled { opacity: 0.5; pointer-events: none; }
  &:required { box-shadow: none; }
  &::-ms-clear { display: none; }
}

.switch__button--small {
  width: 1.6rem;
  height: 1.6rem;
  transform: translateX(0.26rem);
}

.switch-checkbox:focus + .switch,
.switch:focus-within {
  .switch__button {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
}

.switch-checkbox:not(:checked) + .switch__container,
.switch-checkbox:not(:checked) + .switch .switch__container {
  background: var(--unchecked-color) !important;
}

.switch-checkbox:checked + .switch__container,
.switch-checkbox:checked + .switch .switch__container {
  background: var(--checked-color);

  .switch__button {
    transform: translateX(2.2rem);
  }

  .switch__button--small { transform: translateX(1.46rem); }
}

.switch-checkbox:checked + .switch--labelled .switch__container::before {
  content: "On";

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

.switch-checkbox:not(:checked) ~ .switch-reveal,
.switch-checkbox:checked ~ .switch-hide {
  display: none;
}

/* Calendar switch */
.switch--calendar {
  /* 1. Prevents background clipping bug with border-box where the background doesn't bleed under the border
   * on all sides and the border-radius is not applied to the background */
  .switch-checkbox:not(:checked) + & .switch__container {
    background: radial-gradient(circle at -10%, var(--checked-color), var(--unchecked-color) 60%) -2px -2px no-repeat !important;
    background-size: calc(100% + 4px) calc(100% + 4px) !important; /* 1 */
  }
}