.toggle-switch {
  display: inline-flex;
  padding: $toggle-switch-padding;
  line-height: $toggle-switch-outer-height - 2 * ($toggle-switch-padding + $toggle-switch-border-width);
  border-radius: $toggle-switch-outer-height / 2;
  border: $toggle-switch-border-width solid $toggle-switch-border-color;
  cursor: pointer;
  vertical-align: top;

  .toggle-switch-message-on,
  .toggle-switch-message-off {
    padding: 0 3px;
    font-size: $toggle-switch-font-size;
  }

  .toggle-switch-message-on {
    display: none;
  }

  .toggle-switch-toggler {
    border: $toggle-switch-border-width solid $toggle-switch-border-color;
    width: $toggle-switch-outer-height - 2 * ($toggle-switch-padding + $toggle-switch-border-width);
    height: $toggle-switch-outer-height - 2 * ($toggle-switch-padding + $toggle-switch-border-width);
    border-radius: ($toggle-switch-outer-height - 2 * ($toggle-switch-padding + $toggle-switch-border-width)) / 2;
  }

  &.toggle-switch-on {
    .toggle-switch-message-off {
      display: none;
    }

    .toggle-switch-message-on {
      display: block;
    }
  }
}

@each $color, $value in $theme-colors {
  .toggle-switch-#{$color} {
    border-color: $value;
    color: $value;

    .toggle-switch-toggler {
      border-color: $value;
    }

    &.toggle-switch-on {
      background-color: $value;
      @if (lightness($value) > 60) {
        color: $black;
      } @else {
        color: $white;
      }

      .toggle-switch-toggler {
        border-color: white;
        background-color: white;
      }
    }
  }
}