/* rm-switch.css - the on/off switches (bs-switches.css until Step 4, 5 Oct 2026), from https://www.abeautifulsite.net/bootstrap-4-switches */
/* switch-sm modified from 0.8 to 0.5 */
/* 5 Oct 2026 (owner's phone): a label that wraps keeps its text beside the switch (padding-left instead of text-indent, min-height
   instead of height, the track drawn at the switch's own height) - the wrapped lines overlapped the next switch */
.switch {
  font-size: var(--rm-font-size-body);
  position: relative;
}
.switch input {
  position: absolute;
  height: 1px;
  width: 1px;
  background: none;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
}
.switch input + label {
  position: relative;
  min-width: calc(calc(var(--rm-control-height) * .8) * 2);
  border-radius: calc(var(--rm-control-height) * .8);
  min-height: calc(var(--rm-control-height) * .8);
  line-height: calc(var(--rm-control-height) * .8);
  display: inline-block;
  cursor: pointer;
  outline: none;
  user-select: none;
  vertical-align: middle;
  padding-left: calc(calc(calc(var(--rm-control-height) * .8) * 2) + .5rem);
}
.switch input + label:empty { padding-left: 0; }
.switch input + label::before,
.switch input + label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(calc(var(--rm-control-height) * .8) * 2);
  height: calc(var(--rm-control-height) * .8);
  display: block;
}
.switch input + label::before {
  right: 0;
  background-color: var(--rm-mid-grey);	/* as rm-components.css gives it */
  border-radius: calc(var(--rm-control-height) * .8);
  transition: var(--rm-duration-fast) all;
}
.switch input + label::after {
  top: 2px;
  left: 2px;
  width: calc(calc(var(--rm-control-height) * .8) - calc(2px * 2));
  height: calc(calc(var(--rm-control-height) * .8) - calc(2px * 2));
  border-radius: 50%;
  background-color: var(--rm-white);
  transition: var(--rm-duration-fast) all;
}
.switch input:checked + label::before {
  background-color: var(--theme-color);
}
.switch input:checked + label::after {
  margin-left: calc(var(--rm-control-height) * .8);
}
.switch input:focus + label::before {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--rm-accent-focus-soft);
}
.switch input:disabled + label {
  --rm-switch-disabled-text: var(--rm-grey-88);		/* (dark dialogs: Bootstrap's #868e96 / #e9ecef made a light bar - J-42) */
  color: var(--rm-switch-disabled-text);
  cursor: not-allowed;
}
.switch input:disabled + label::before {
  --rm-switch-disabled-track: var(--rm-grey-49);
  background-color: var(--rm-switch-disabled-track);
}


.switch.switch-sm {
  font-size: 0.8rem;
}
.switch.switch-sm input + label {
  min-width: calc(calc(var(--rm-control-height-sm) * .5) * 2);
  min-height: calc(var(--rm-control-height-sm) * .5);
  line-height: calc(var(--rm-control-height-sm) * .5);
  padding-left: calc(calc(calc(var(--rm-control-height-sm) * .5) * 2) + .5rem);
}
.switch.switch-sm input + label:empty { padding-left: 0; }
.switch.switch-sm input + label::before {
  width: calc(calc(var(--rm-control-height-sm) * .5) * 2);
  height: calc(var(--rm-control-height-sm) * .5);
}
.switch.switch-sm input + label::after {
  width: calc(calc(var(--rm-control-height-sm) * .5) - calc(2px * 2));
  height: calc(calc(var(--rm-control-height-sm) * .5) - calc(2px * 2));
}
.switch.switch-sm input:checked + label::after {
  margin-left: calc(var(--rm-control-height-sm) * .5);
}


.switch.switch-lg {
  font-size: 1.25rem;
}
.switch.switch-lg input + label {
  min-width: calc(calc(var(--rm-control-height-lg) * .8) * 2);
  min-height: calc(var(--rm-control-height-lg) * .8);
  line-height: calc(var(--rm-control-height-lg) * .8);
  padding-left: calc(calc(calc(var(--rm-control-height-lg) * .8) * 2) + .5rem);
}
.switch.switch-lg input + label:empty { padding-left: 0; }
.switch.switch-lg input + label::before {
  width: calc(calc(var(--rm-control-height-lg) * .8) * 2);
  height: calc(var(--rm-control-height-lg) * .8);
}
.switch.switch-lg input + label::after {
  width: calc(calc(var(--rm-control-height-lg) * .8) - calc(2px * 2));
  height: calc(calc(var(--rm-control-height-lg) * .8) - calc(2px * 2));
}
.switch.switch-lg input:checked + label::after {
  margin-left: calc(var(--rm-control-height-lg) * .8);
}


.switch + .switch {
  margin-left: 1rem;
}