.tf-field-switch {

  .tf-switch-label {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 32px;
    border-radius: 20px;

    input {
      display: none;
    }

    .tf-switch-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: $red60;
      border-radius: 20px;
      @include transition(all, 0.4s);

      &::before {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        border-radius: 12px;
        top: 4px;
        left: 4px;
        background-color: white;
        box-shadow: 0px 0px 8px rgba(27, 25, 25, 0.3);
        @include transition(all, 0.4s);
      }

      .tf-switch-on, .tf-switch-off {
        color: white;
        position: absolute;
        @include translateY(-50%);
        top: 50%;
        left: 12px;
        font-size: 14px;
        opacity: 0;
        @include transition(all, 0.4s);
      }

      .tf-switch-off {
        left: auto;
        right: 12px;
        opacity: 1;
      }
    }

    input:checked {
      & + .tf-switch-slider {
        background-color: #060;

        &:before {
          left: 100%;
          margin-left: -28px;
        }

        .tf-switch-on {
          opacity: 1;
        }

        .tf-switch-off {
          opacity: 0;
        }
      }
    }
  }

}