.c-switch {
  $self: #{&};
  $label: #{$self}__label;
  $content: #{$self}__content;
  $toggle: #{$self}__toggle;
  $toggle-track: #{$toggle}-track;
  $toggle-knob: #{$toggle}-knob;

  $padding: .125em 0;
  $track-width: 2.125em;
  $track-height: .875em;
  $track-background-color: lighten($check-color, 20%);
  $knob-size: $check-toggle-size;
  $knob-transition: .1s ease;
  $track-transition: .1s ease;

  $knob-box-shadow: 0 0 0 .5em;
  $knob-hover-box-shadow: $knob-box-shadow $check-shadow-color;
  $knob-press-box-shadow: $knob-box-shadow $check-shadow-press-color;
  $knob-active-hover-box-shadow: $knob-box-shadow $check-active-shadow-color;
  $knob-active-press-box-shadow: $knob-box-shadow $check-active-shadow-press-color;

  @at-root {
    #{$self} {
      display: inline-block;
      font-size: 1rem;

      &:hover,
      &:focus {
        #{$toggle-knob} {
          box-shadow: $knob-hover-box-shadow;

          &:before {
            box-shadow: $check-toggle-shadow;
          }
        }
      }

      &:active {
        #{$toggle-knob} {
          box-shadow: $knob-press-box-shadow;
        }
      }

      input {
        &[type="checkbox"],
        &[type="radio"] {
          display: none;
          opacity: 0;
        }

        &:not(:checked),
        &:checked {
          display: none;
          opacity: 0;
        }
      }

      &.is-active {
        &:hover,
        &:focus {
          #{$toggle-knob} {
            box-shadow: $knob-active-hover-box-shadow;
          }
        }

        &:active {
          #{$toggle-knob} {
            box-shadow: $knob-active-press-box-shadow;
          }
        }

        #{$toggle-track} {
          background-color: $check-active-color;
        }

        #{$toggle-knob} {
          color: $check-active-color;
          transform: translateX($track-width - $knob-size);
        }
      }
    }

    #{$label} {
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      padding: $padding;
      cursor: pointer;
      margin: 0;
      font-weight: 400;
      font-style: normal;
    }

    #{$content} {
      display: block;
      padding: $check-content-padding;
    }

    #{$toggle} {
      position: relative;
      margin-top: .25em;
    }

    #{$toggle-track} {
      display: block;
      z-index: 2;
      width: $track-width;
      height: $track-height;
      border-radius: $track-height / 2;
      background-color: $track-background-color;
      font-size: inherit;
      outline: none;
      cursor: pointer;
      transition: background-color $track-transition;
    }

    #{$toggle-knob} {
      display: block;
      position: absolute;
      z-index: 3;
      top: -.2rem;
      left: 0;
      width: 1em;
      height: 1em;
      font-size: $check-toggle-size;
      line-height: 1;
      border-radius: .5em;
      color: $track-background-color;
      transform: translateX(0px);
      transition: transform $knob-transition, box-shadow $knob-transition;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: .1em solid currentColor;
        color: inherit;
        background-color: #fff;
      }
    }

  }

}