.customize-control-kirki-switch {
  position: relative;

  .switch-off,
  .switch-on {
    opacity: 1;
    padding: 8px;
    font-size: 14px;
    line-height: 18px;
  }

  .switch-on {
    color: #fff;
    opacity: 0;
  }

  .switch-off {
    color: #777;
  }

  .switch {
    border: none;
    margin-bottom: 1.5rem;
    outline: 0;
    padding: 0;
    user-select: none;
    border-radius: 3rem;
  }

  label {
    background: $color-light-silver-gray;
    float: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    position: relative;
    transition: left 0.15s ease-out;
    border-radius: 3rem;

    &:after {
      background: #FFFFFF;
      content: "";
      display: block;
      position: absolute;
      left: 5px;
      top: 5px;
      width: calc(.85rem + 10px);
      height: calc(.85rem + 10px);
      transition: all 0.25s ease-in-out;
      border-radius: 3rem;
    }
  }

  input {
    + label {
      margin-left: 0;
      margin-right: 0;
    }

    &:checked {
      + label {
        background: $color-wp-blue;

        &:after {
          left: auto;
          right: 5px;
          background: #ffffff;
        }

        .switch-on {
          opacity: 1;
        }

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