/** --------------------------------------------------------------------

  ARIA Switch Toggle Button

--------------------------------------------------------------------- */
.switch-toggle {
  background: none;
  border: none;
  cursor: default;
  display: block;
  font-size: inherit;
  line-height: 1;
  margin: 1em 0 0;
  padding: 0.5em 0;
  position: relative;
  text-align: left;
  transition: box-shadow 0.2s ease-in-out;
  width: 100%;
}

.switch-toggle:focus {
  outline: none;
}

/* negate 'flash' of text color when pressing a button in some browsers */
.switch-toggle:active {
  color: inherit;
}

/* using the before/after pseudo elements of the span to create the "switch" */
.switch-toggle span:before,
.switch-toggle span:after {
  border: 1px solid #565656;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* styling specific to the knob of the switch */
.switch-toggle span:after {
  background: #fff;
  border-radius: 100%;
  height: 1.5em;
  right: 1.5em;
  transition: right 0.1825s ease-in-out;
  width: 1.5em;
}

/* styling specific to the knob "container" */
.switch-toggle span:before {
  background: #eee;
  border-radius: 1.75em;
  height: 1.75em;
  right: 0.25em;
  transition: background 0.2s ease-in-out;
  width: 2.75em;
}

.switch-toggle span {
  pointer-events: none;
}

.switch-toggle:not([data-keep-disabled]):hover span:before,
.switch-toggle:not([data-keep-disabled]):focus span:before {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

/* change the position of the knob to indicate it has been checked*/
.switch-toggle[aria-checked="true"] span:after {
  right: 0.25em;
}

/* update the color of the "container" to further visually indicate state */
.switch-toggle[aria-checked="true"] span:before {
  background: #2196f3;
}

.switch-toggle[disabled] span,
.switch-toggle[aria-disabled="true"] span {
  opacity: 0.65;
}

/**
 * Toggle switch modifications for displaying On/Off labels
 */
.switch-toggle .show-labels:before {
  content: "Off";
  color: rgba(10, 10, 10, 1);
  line-height: 1.6;
  text-indent: 1.625em;
  width: 3.5em;
}

.switch-toggle[aria-checked="false"] .show-labels:after {
  right: 2.2em;
}

.switch-toggle[aria-checked="true"] .show-labels:before {
  color: rgba(255, 255, 255, 1);
  content: "On";
  text-indent: 0.25em;
  text-shadow: 0 0 1px #000;
}

@media screen and (-ms-high-contrast: active) {
  .switch-toggle span:after {
    background-color: windowText;
  }
}

/* containing label */
.check-switch {
  display: block;
  overflow: hidden;
  padding: 0.5em 0;
  position: relative;
}

/* using the before/after pseudo elements of the span to create the "switch" */
.check-switch span:before,
.check-switch span:after {
  border: 1px solid #565656;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* styling specific to the knob of the switch */
.check-switch span:after {
  background: #fff;
  border-radius: 100%;
  height: 1.5em;
  right: 1.5em;
  transition: right 0.1825s ease-in-out;
  width: 1.5em;
}

/* styling specific to the knob "container" */
.check-switch span:before {
  background: #eee;
  border-radius: 1.75em;
  height: 1.75em;
  right: 0.25em;
  transition: background 0.2s ease-in-out;
  width: 2.75em;
}

/* hide the actual checkbox from view, but not from keyboards or ATs.
   Instead of standard visually hidden styling, instead set opacity to
   to 0 and set to full height/width of container element so that VO focus
   ring outlines the component, instead of a tiny box within the component.
   This will also allow for the checkbox input to be discovered if someone
   were to search by touch.
*/
.check-switch input {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.check-switch input:disabled + span,
.check-switch input[aria-disabled="true"] + span {
  opacity: 0.65;
}

.check-switch:hover input:not([data-keep-disabled]) + span:before,
.check-switch input:not([data-keep-disabled]):focus + span:before {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

/* change the position of the knob to indicate it has been checked*/
.check-switch input:checked + span:after {
  right: 0.25em;
}

/* update the color of the "container" to further visually indicate state */
.check-switch input:checked + span:before {
  background: #2196f3;
}

/* 'color in' the switch knob in high contrast mode by giving it
   a large border */
@media screen and (-ms-high-contrast: active) {
  .check-switch span:after {
    background-color: windowText;
  }
}